🛤️ 🎹 🐮 We realize an interesting effect using Anime.js 🤵🏾 💿 🧛🏿

Good day, friends!

In this article, as the name implies, we will implement one interesting effect using one interesting library ( anime.js ). I will not sing praises to this library, but those who are busy with animation should definitely pay attention to it. Simple interface + excellent documentation, what else is needed for creativity?

Based on the materials of this wonderful article.

The author of this article called his effect “Particle Trail Animation”.

We will take the code from the article, analyze it in detail and improve it a bit.

First, make the particles colorful. Because one color is boring.

Secondly, the animation will start by click. Because endless animation is annoying.

Thirdly, we attach the center of the animation (spiral) to the place of the click. Because user experience comes first.

We will not use canvas. Many small blocks (divs) will be animated.

So, let's go (as Gagarin said, going to space).

What is our HTML made up of? In it, we connect the library, our script and, in fact, everything.

The styles are also hardly impressive:

body {
    margin: 0;
    background: #333;
    overflow: hidden;
}

/*   */
.dot {
    position: absolute;
    /*   */
    border-radius: 50%;
}

Give JavaScript! As you wish.

We wrap all our code in a click event handler of the Window object:

window.addEventListener('click', event => {  ... })

Create a container for particles with the class "box":

let box = document.createElement('div')
box.classList.add('box')
document.body.appendChild(box)

We determine some values (not magic numbers, don't worry, be happy):

//     
let n = 10

//   
//     
let a = 20

//  
//      
let l = 110

We generate particles using two for loops:

for (let i = 0; i <= l; i++) {
    //  
    let angle = 0.1 * i

    //     
    let x = (a * angle) * Math.cos(angle) + event.clientX
    let y = (a * angle) * Math.sin(angle) + event.clientY

    //  n    
    for (let j = 0; j < n; j++) {
        //     "dot"
        let dot = document.createElement('div')
        dot.classList.add('dot')
        box.appendChild(dot)

        //       "anime.random()"
        //    
        //   
        let size = anime.random(5, 10)

        //  
        //   "style"
        dot.setAttribute('style',
        //    ()  
        //  
        `width: ${size}px; height: ${size}px;

        //    anime.random()
        top: ${y + anime.random(-15, 15)}px; left: ${x + anime.random(-15, 15)}px;

        //      
        opacity: 0;

        //        
        background: #${     }`)
    }
}

The function for obtaining an arbitrary color may look like this:

function getRandomColor() {
    let letters = '0123456789abcdef',
        color = '#'
    for (let i = 0; i < 6; i++) {
        color += letters[Math.trunc(Math.random() * 16)]
    }
    return color
}

But we are not looking for easy ways, so it will look like this:

(Math.random()*0xffffff<<0).toString(16)

It uses a bitwise left shift and cast to a hexadecimal string.

Next, the particles we created are animated using anime:

anime({
    //  
    targets: document.querySelectorAll('.dot'),
    // 
    loop: false,
    //   
    //     ()
    easing: 'linear',

    //  
    // 
    //    
    opacity: [
        {
            value: 1,
            // 
            duration: 50,
            // 
            delay: anime.stagger(2)
        },
        {
            value: 0,
            duration: 1200
        }
    ],

    //   ()
    // 
    width: {
        value: 2,
        duration: 500,
        delay: anime.stagger(2)
    },
    // 
    height: {
        value: 2,
        duration: 500,
        delay: anime.stagger(2)
    },

    //  
    //    
    translateX: {
        value: () => anime.random(-30, 30),
        duration: 1500,
        delay: anime.stagger(2)
    },
    //    y
    translateY: {
        value: () => anime.random(-30, 30),
        duration: 1500,
        delay: anime.stagger(2)
    }
})

Last, but not least, add to the beginning the check for the presence of box:

if (document.querySelector(".box")) {
    document.body.removeChild(document.querySelector(".box"));
  }

Result:

GitHub code .

That's all, folks! Thank you for attention.

We realize an interesting effect using Anime.js

More articles: