Learn Animejs - 10 Code Examples & CST Typing Practice Test

Anime.js is a lightweight JavaScript animation library that enables developers to create smooth, complex, and performant animations on the web. It works with CSS properties, SVG, DOM attributes, and JavaScript objects.

View all 10 Animejs code examples →

Simple Anime.js Animation Bounce Animation Rotate Animation Scale Pulse Color Change Translate XY Timeline Example Staggered Animation Elastic Animation Rotate and Scale

Learn ANIMEJS with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Anime.js Animation

# animejs/demo/index.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="box" style="width:100px;height:100px;background:red;"></div>
        <script>
        anime({
        targets: '#box',
        x: 250,
        scale: 1.5,
        duration: 2000,
        easing: 'easeInOutQuad'
        });
        </script>
    </body>
</html>

A basic Anime.js program that animates a div element moving horizontally and scaling up.

Let’s Try →

Bounce Animation

# animejs/demo/bounce.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="ball" style="width:100px;height:100px;background:blue;"></div>
        <script>
        anime({
        targets: '#ball',
        y: 300,
        duration: 1000,
        repeat: Infinity,
        yoyo: true,
        easing: 'easeOutBounce'
        });
        </script>
    </body>
</html>

A div bouncing vertically with easeOutBounce.

Let’s Try →

Rotate Animation

# animejs/demo/rotate.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="rotate" style="width:100px;height:100px;background:green;"></div>
        <script>
        anime({
        targets: '#rotate',
        rotate: 360,
        duration: 2000,
        repeat: Infinity,
        easing: 'linear'
        });
        </script>
    </body>
</html>

Rotates a div continuously with linear easing.

Let’s Try →

Scale Pulse

# animejs/demo/scale_pulse.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="pulse" style="width:100px;height:100px;background:orange;"></div>
        <script>
        anime({
        targets: '#pulse',
        scale: 1.5,
        duration: 1000,
        repeat: Infinity,
        yoyo: true,
        easing: 'easeInOutSine'
        });
        </script>
    </body>
</html>

Creates a pulsing scale effect repeatedly.

Let’s Try →

Color Change

# animejs/demo/color_change.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="colorBox" style="width:100px;height:100px;background:purple;"></div>
        <script>
        anime({
        targets: '#colorBox',
        backgroundColor: '#00FF00',
        duration: 2000,
        repeat: Infinity,
        yoyo: true
        });
        </script>
    </body>
</html>

Animates a div's background color between two colors.

Let’s Try →

Translate XY

# animejs/demo/translate_xy.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="moveBox" style="width:100px;height:100px;background:pink;"></div>
        <script>
        anime({
        targets: '#moveBox',
        x: 250,
        y: 150,
        duration: 2000,
        repeat: Infinity,
        yoyo: true,
        easing: 'easeInOutQuad'
        });
        </script>
    </body>
</html>

Moves a div diagonally across the screen.

Let’s Try →

Timeline Example

# animejs/demo/timeline.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="box1" style="width:50px;height:50px;background:red;margin:10px;"></div>
        <div id="box2" style="width:50px;height:50px;background:blue;margin:10px;"></div>
        <script>
        const tl = anime.timeline({ loop: true });
        tl.add({ targets: '#box1', translateX: 250, duration: 1000 })
          .add({ targets: '#box2', translateY: 200, duration: 1000 });
        </script>
    </body>
</html>

Sequences multiple animations using a timeline.

Let’s Try →

Staggered Animation

# animejs/demo/stagger.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div class="boxes" style="width:50px;height:50px;background:orange;margin:5px;display:inline-block;"></div>
        <div class="boxes" style="width:50px;height:50px;background:orange;margin:5px;display:inline-block;"></div>
        <div class="boxes" style="width:50px;height:50px;background:orange;margin:5px;display:inline-block;"></div>
        <script>
        anime({
        targets: '.boxes',
        x: 200,
        duration: 1000,
        delay: anime.stagger(200),
        repeat: Infinity,
        yoyo: true
        });
        </script>
    </body>
</html>

Animates multiple divs with staggered delays.

Let’s Try →

Elastic Animation

# animejs/demo/elastic.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="elasticBox" style="width:100px;height:100px;background:lime;"></div>
        <script>
        anime({
        targets: '#elasticBox',
        x: 250,
        easing: 'easeOutElastic(1, .5)',
        duration: 2000,
        repeat: Infinity,
        yoyo: true
        });
        </script>
    </body>
</html>

Animates a div with elastic ease effect.

Let’s Try →

Rotate and Scale

# animejs/demo/rotate_scale.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="box" style="width:100px;height:100px;background:purple;"></div>
        <script>
        anime({
        targets: '#box',
        rotate: 360,
        scale: 1.5,
        duration: 2000,
        repeat: Infinity,
        yoyo: true
        });
        </script>
    </body>
</html>

Rotates and scales a div simultaneously.

Let’s Try →

Frequently Asked Questions about Animejs

What is Animejs?

What are the primary use cases for Animejs?

Animating CSS properties like opacity, transform, and color. SVG morphing and path animations. UI micro-interactions (buttons, menus, modals). Data visualizations and chart animations. Sequenced animations via timelines

What are the strengths of Animejs?

Lightweight and performant. Simple API with high flexibility. Cross-browser support. Works seamlessly with modern frameworks. Ideal for interactive and complex animation sequences

What are the limitations of Animejs?

Not a full game engine animation system. Requires JavaScript knowledge. Limited physics-based simulation (needs external libs). Performance can drop with very large DOM trees. Animation sequencing for very complex apps can become verbose

How can I practice Animejs typing speed?

CodeSpeedTest offers 10+ real Animejs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Animejs - 10 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Simple Anime.js Animation

# animejs/demo/index.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="box" style="width:100px;height:100px;background:red;"></div>
        <script>
        anime({
        targets: '#box',
        x: 250,
        scale: 1.5,
        duration: 2000,
        easing: 'easeInOutQuad'
        });
        </script>
    </body>
</html>

A basic Anime.js program that animates a div element moving horizontally and scaling up.

Let’s Try →

Bounce Animation

# animejs/demo/bounce.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="ball" style="width:100px;height:100px;background:blue;"></div>
        <script>
        anime({
        targets: '#ball',
        y: 300,
        duration: 1000,
        repeat: Infinity,
        yoyo: true,
        easing: 'easeOutBounce'
        });
        </script>
    </body>
</html>

A div bouncing vertically with easeOutBounce.

Let’s Try →

Rotate Animation

# animejs/demo/rotate.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="rotate" style="width:100px;height:100px;background:green;"></div>
        <script>
        anime({
        targets: '#rotate',
        rotate: 360,
        duration: 2000,
        repeat: Infinity,
        easing: 'linear'
        });
        </script>
    </body>
</html>

Rotates a div continuously with linear easing.

Let’s Try →

Scale Pulse

# animejs/demo/scale_pulse.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="pulse" style="width:100px;height:100px;background:orange;"></div>
        <script>
        anime({
        targets: '#pulse',
        scale: 1.5,
        duration: 1000,
        repeat: Infinity,
        yoyo: true,
        easing: 'easeInOutSine'
        });
        </script>
    </body>
</html>

Creates a pulsing scale effect repeatedly.

Let’s Try →

Color Change

# animejs/demo/color_change.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="colorBox" style="width:100px;height:100px;background:purple;"></div>
        <script>
        anime({
        targets: '#colorBox',
        backgroundColor: '#00FF00',
        duration: 2000,
        repeat: Infinity,
        yoyo: true
        });
        </script>
    </body>
</html>

Animates a div's background color between two colors.

Let’s Try →

Translate XY

# animejs/demo/translate_xy.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="moveBox" style="width:100px;height:100px;background:pink;"></div>
        <script>
        anime({
        targets: '#moveBox',
        x: 250,
        y: 150,
        duration: 2000,
        repeat: Infinity,
        yoyo: true,
        easing: 'easeInOutQuad'
        });
        </script>
    </body>
</html>

Moves a div diagonally across the screen.

Let’s Try →

Timeline Example

# animejs/demo/timeline.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="box1" style="width:50px;height:50px;background:red;margin:10px;"></div>
        <div id="box2" style="width:50px;height:50px;background:blue;margin:10px;"></div>
        <script>
        const tl = anime.timeline({ loop: true });
        tl.add({ targets: '#box1', translateX: 250, duration: 1000 })
          .add({ targets: '#box2', translateY: 200, duration: 1000 });
        </script>
    </body>
</html>

Sequences multiple animations using a timeline.

Let’s Try →

Staggered Animation

# animejs/demo/stagger.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div class="boxes" style="width:50px;height:50px;background:orange;margin:5px;display:inline-block;"></div>
        <div class="boxes" style="width:50px;height:50px;background:orange;margin:5px;display:inline-block;"></div>
        <div class="boxes" style="width:50px;height:50px;background:orange;margin:5px;display:inline-block;"></div>
        <script>
        anime({
        targets: '.boxes',
        x: 200,
        duration: 1000,
        delay: anime.stagger(200),
        repeat: Infinity,
        yoyo: true
        });
        </script>
    </body>
</html>

Animates multiple divs with staggered delays.

Let’s Try →

Elastic Animation

# animejs/demo/elastic.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="elasticBox" style="width:100px;height:100px;background:lime;"></div>
        <script>
        anime({
        targets: '#elasticBox',
        x: 250,
        easing: 'easeOutElastic(1, .5)',
        duration: 2000,
        repeat: Infinity,
        yoyo: true
        });
        </script>
    </body>
</html>

Animates a div with elastic ease effect.

Let’s Try →

Rotate and Scale

# animejs/demo/rotate_scale.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    </head>
    <body>
        <div id="box" style="width:100px;height:100px;background:purple;"></div>
        <script>
        anime({
        targets: '#box',
        rotate: 360,
        scale: 1.5,
        duration: 2000,
        repeat: Infinity,
        yoyo: true
        });
        </script>
    </body>
</html>

Rotates and scales a div simultaneously.

Let’s Try →

Frequently Asked Questions about Animejs

What is Animejs?

What are the primary use cases for Animejs?

What are the strengths of Animejs?

Lightweight and performant. Simple API with high flexibility. Cross-browser support. Works seamlessly with modern frameworks. Ideal for interactive and complex animation sequences

What are the limitations of Animejs?

How can I practice Animejs typing speed?

CodeSpeedTest offers 10+ real Animejs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.