One of the most frustrating aspects of front-end development is that products often come up with annoying animations or strange requirements. Animate. CSS, this animation is just used with some simple scenes, notes a paragraph of text shake, a paragraph of text in and out of the effect, but can not meet, how to make a line of text to achieve cool suspender sky animation. Nor can it achieve the effect of a dynamic physical object, such as a highly realistic bicycle being ridden, which would have front end engineers scratching their heads. Some people say, I just need CV. 🤔 are you sure you can find a case that meets your needs? It’s not as fast as writing your own. So the question is, how do you write such animations gracefully and efficiently? Tapping on animo.js will help us with all kinds of complex animations.

What is animo.js?

Animo.js is a powerful Javascript animation library plug-in. Animo.js can work with CSS3 attributes, SVG, DOM elements and JS objects to create a variety of high-performance, smooth transition animations. Website”

compatibility

Compatibility feels ok

How to use

  • Install the anime. Js
npm install animejs 
bower install animejs
Copy the code
  • use

Introduce the animo.min.js file into the page.

<script type="text/javascript" src="js/anime.min.js"></script>
Copy the code
  • HTML structure

Take animating two div elements. The HTML structure looks like this:

<article>
  <div class="blue"></div>
  <div class="green"></div>
</article>
Copy the code
  • Initialize the plug-in

Construct an object instance using the anime() method, passing in the desired parameters as json objects:

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});
Copy the code

Actual combat drill ha 😜

X Animation Effects

html

<button id='runaway-btn'>Click Me The & # 129315;</button>
Copy the code

css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  background-color: rgb(31.31.31);
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 4rem;
  width: 10rem;
  font-size: 1.5 rem;
  border-radius: 5px;
  border: none;
  box-shadow: 1px 1px 5px black;
  background-color: white;
}

Copy the code

js

const button = document.getElementById("runaway-btn");

const animateMove = (element, prop, pixels) = >
  anime({
    targets: element,
    [prop]: `${pixels}px`.easing: "easeOutCirc"
  });

["mouseover"."click"].forEach(function (el) {
  button.addEventListener(el, function (event) {
    const top = getRandomNumber(window.innerHeight - this.offsetHeight);
    const left = getRandomNumber(window.innerWidth - this.offsetWidth);

    animateMove(this."left", left).play();
    animateMove(this."top", top).play();
  });
});

const getRandomNumber = (num) = > {
  return Math.floor(Math.random() * (num + 1));
};

Copy the code

Effect display diagram