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 →

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 →