HOME / LAB >

Cool Animations with Anime.js

Published: 14/08/2019 Categories: Coding, Javascript Leave a comment

Hello all! This time we are going to explore another animation library, anime.js. In a previous post we talked about mo.js, which we used to create motion animations. With anime.js, we can dive into svg, shape manipulation, and organization of our timeline.

To animate with anime.js, we simply create a timeline object, we specify a target element, and the attributes that we want altered. For example, to animate a .box element we use the following lines of code.

var basicTimeline = anime.timeline({
  autoplay: false
});

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
});

basicTimeline.play();

 

Simple Watery Effect

We can use the feTurbulence, and feDisplacementMap attributes of SVG to create a watery effect. We just tweak the baseFrequency and numOctaves values to achieve the level of “watery”.

 var timeline = anime.timeline({
  duration: 5000,
  easing: 'linear',
  autoplay: true
});

timeline.add({
  targets: ['#buttonShape', 'feTurbulence' , 'feDisplacementMap'],
  baseFrequency: [0,.06],
  numOctaves: 4
});




 

You can see in the pen below the end result.

See the Pen Simple Water Effect by cheBandoneon (@cheBandoneon) on CodePen.0

 

Cool Upload Button

We can take the shape manipulation logic and create an upload button. This time we have 3 elements which we chain to create the animation. A button, a loading bar and a check symbol to assure the user that everything went ok. The logic is no different, we simply add the events to the timeline and they animate in a linear way.

basicTimeline
  .add({
    targets: ".text",
    duration: 100,
    opacity: "0"
  })
  .add({
    targets: ".button",
    width: 30,
    height: 30,
    duration: 800,
    borderRadius: 80,
    translateY: -70,
  })
  .add({
    targets: ".progress-wrapper .bar",
    width: 200,
    duration: 2000,
    easing: "linear"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 500,
    easing: "easeInOutSine"
});

See the pen below for the end result

See the Pen Animation with anime.js by cheBandoneon (@cheBandoneon) on CodePen.0

 

The last example can surely be used to any form to make it more fun, while you can experiment with something like the first example to create some interesting hover effects. You can always check what others have posted on codepen regarding anime.js, and gain inspiration from there.

That’s all for this Friday!