Chapter 2: Five Top Vue Animation Libraries

by Maria Antonietta Perna

In this article, we’ll look at what Ethereum nodes are, and explore one of the most popular ones, called Geth.

Animation can be your a powerful tool in your UX toolbox. It keeps web users engaged, and it’s lots of fun to create. Vue.js is a progressive JavaScript framework that lets you build user interfaces and powerful web apps.

Follow me as I show you how you can quickly set Vue in motion with five great web animation libraries.

Why Animation on the Web?

Our brains are hardwired to pay attention and react to things that move around us. This is a survival mechanism, but also part of the way we understand the world. Websites are communication tools, and animation is part of the communication strategy around a web design project. As such, web animation, far from simply being decorative, is functional to the success of a website’s goals, and therefore plays a number of important roles.

A Few Words of Caution about Web Animation

When it comes to web animation, usually less is more. Going overboard with your animations is tempting, but it’s often a consequence of poor design. To avoid falling into this trap, it’s useful to keep in mind that your animation should have a point and should facilitate what users are expected to do on your website. In other words, animation must not be in the way.

Another aspect of animation you should be aware of is that motion on the Web can have some serious accessibility implications:

It’s no secret that a lot of people consider scrolljacking and parallax effects annoying and overused. But what if motion does more than just annoy you? What if it also makes you ill? — Val Head, Designing Safer Web Animation for Motion Sensitivity

Val Head refers to visually triggered vestibular disorders, which can cause symptoms of nausea, dizziness, headaches and even worse, at the sight of large-scale motion on screen. One way in which you can minimize discomfort to your users is to give them control over whether they want to start an animation, and at what speed. For more details on this topic, check out More Resources for Accessible Animations by Val Head, which, together with the article cited above, covers a great deal of ground and goes a long way towards helping you craft animations designed with accessibility and respect for your website’s users in mind.

What Web Animation Is Good For

Humans are drawn towards movement, so you can use animation to convey information through motion. For instance, color animation on hover draws users’ attention to the link. Animating an area or an element of a web page gives users cues about where they’re expected to look or what they’re expected to do. A fun loader communicates to users that some process is taking place on the website and keeps them engaged so the perceived waiting time feels shorter.

Also, the way you design an animation contributes to the creation and reinforcement of brand identity while also giving your website a sophisticated touch of professionalism and polish.

From the point of view of front-end devs, there’s never been a better time for coding motion experiences on the web. Browsers’ handling of animation keeps improving, devices are more and more capable, and there are some amazing tools out there you can use to create web animations.

Let’s explore some possibilities in relation to Vue.js.

Vue.js Transition and Animation Systems

Applying CSS transitions and animations is a snap with Vue’s <transition> and <transition-group> components. Before I illustrate how these work, let’s briefly clarify the difference between CSS transitions and CSS animations.

CSS Transitions

CSS transitions involve animating the state of a property from an initial starting point to an end state in response to an event—such as a mouse hover, or a hover event. The browser will take care of interpolating all the in-between states of the animation. Therefore, if your animation consists of just changing a property from A to B, transitions will be the simplest and most efficient way of implementing it.

CSS Animations

CSS animations are great if your animation consists of more than just an initial and final state and therefore you need more control over each stage throughout the movement.

For more details on CSS transitions and animations, their differences and use cases, check out “CSS Transitions 101: Let’s Animate a Toggle Button Icon”.

CSS Transitions in Vue

Vue already makes hiding and showing content on the page a painless and quick operation, using the v-if or v-show directives:

<div id="app">
  <button v-if="show" @click="show = !show">Show</button>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      show: true
    }
  }
})
</script>

The snippet above shows the button on the page only if the show property in the Vue instance is true. Clicking the button causes the show property to switch to false, which in turn leads to the removal of the button element.

However, this approach produces a sudden showing/hiding of the element, which doesn’t give users a great experience. Enter CSS transitions and Vue’s <transition> component: the latter is a convenient wrapper that Vue makes available to let you add transitions to any element or component.

Here’s how you’d use it to animate the button in the above example:

<div id="app">
  <transition name="fade">
    <button v-if="show" @click="show = !show">Show</button>
  </transition>
</div>

The button code is wrapped inside a <transition> component named fade.

In the CSS code, the fade CSS transition is built using Vue’s <transition> component’s hooks as follows:

.fade-leave-active{
  transition: opacity 2s;
}

.fade-leave-to {
  opacity: 0;
}

The .fade-leave-active hook is available while the animation is running, and it’s here that you can specify the transition properties.

.fade-leave-to represents the last positions in the animation. In this case, by setting opacity to 0, the button starts the animation by being visible and ends the animation by disappearing.

You can get the lowdown on all the transition classes available to you on the Vue.js docs.

Vue also offers a <transition-group> component for animating more than one element in one go, which I’m going to illustrate later in this article.

CSS Animations in Vue

You can add CSS animations to your Vue app using the same <transition> component and the same class hooks as CSS transitions, but instead of simply defining a starting point and an end point leaving the browser to figure out the in-between states, you take matters in your own hands using @keyframes to define each stage in the animation. The cool thing is that you can code your own animations or just as easily plug in a CSS animation library like Animate.css and you’re off to the races!

Let’s see how you can do just that.

#1 Animate.css

Animate.css is a handy cross-browser library of sleek and playful CSS animations created by Daniel Eden.

You can quickly put it to use by adding the animated class to the element you intend to animate together with the name of the animation of your choice among all the great options this library has to offer. You can also add other animation-specific properties like how many times you want the animation to play, its duration, delay, and so on.

For instance, here’s a <div> element set up to bounce up and down for an infinite number of times:

<div class="animated infinite bounce delay-2s"></div>

To include Animate.css in your Vue app, add the library’s classes to the hooks made available inside the <transition> component. Here’s an example:

<div id="app">
  <transition name="rotateSlide" appear
   enter-active-class="animated rotateInUpRight"
   leave-active-class="animated slideOutUp">
      <div v-if="show" class="message" @click="move">
        {{ bubble }}
      </div>
  </transition>
</div>

Let’s go through what happens in the snippet above:

• The Vue animation is called rotateSlide.
• The appear attribute ensures that the opening animation is triggered as soon as the page renders in the browser.
• The animated, rotateInUpRight and slideOutUp classes are Animate.css classes.
• Adding rotateInUpRight to Vue’s enter-active-class causes the element to appear as it rotates on the right side towards the top of the screen.
• By the same token, adding slideOutUp to Vue’s leave-active-class causes the element to slide to the top of the page and disappear. This second animation is triggered by clicking on the element.

Animate.css with Vue’s <transition-group> Component

The <transition-group> component is Vue’s way of facilitating the animation of a bunch of elements like list items. Its use is similar to the <transition> component. Here’s a snippet to show what it looks like with Animate.css:

<transition-group
  name="listitems"
  tag="ul"
  appear
  enter-active-class="animated bounceInUp"
>
  <li
    is="app-book"
    v-for="(book, index) in books"
    :key="index"
    :book="book">
  </li>
</transition-group>

Above, the <transition-group> component named listitems encloses a list item component. Notice the tag property inside the transition-group with a value of ul. This automatically generates the <ul></ul> tags around the list’s <li></li> tags of the list component. When the page first renders, the items in the list will make a smooth bouncing animation thanks to the Animate.css bounceInUp class.

#2 Animatelo.js

Animatelo by Gibbok is—

a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. — Animatelo

It’s also a porting to the Web Animations API of the Animate.css project examined earlier.

It’s a great option if you need to add a bit more dynamism to your CSS animations.

Below is a snippet taken from the library’s docs to show you the basic usage:

<!-- Include the polyfill -->
<script src="//cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js"></script>

<!-- Include Animatelo -->
<script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script>

<!-- Set up a target to animate -->
<h1 id="hello">Hello world!</h1>

<!-- Animate! -->
<script>
  window.animatelo.flip('#hello');
</script>

Here are a couple of things to notice:

• Since Animatelo uses the Web Animations API, it needs a polyfill, at least until wider browser support becomes available
• To set an element in motion, the syntax above with your chosen pre-built animation and a reference to your element is all you need. More generally, structure your code like this: window.animatelo.animation(selector, options).

The options Animatelo makes available are:

• id (optional): a DOM string you can use to reference your animation, which is specific to Animate.css.
• delay (optional): the number of milliseconds you want to delay the start of the animation. It defaults to 0.
• direction (optional): you can set this value to normal (the animation runs forward), reverse (the animation runs backwards), alternate (the animation switches direction after each iteration), alternate-reverse (the animation runs backwards and switches direction after each iteration).
• duration (optional): the number of milliseconds your animation lasts. It defaults to 1000 milliseconds.
• fill (optional): you can set this option to backwards (you can see the animation’s effect before the animation even starts playing), forwards (the animation’s effects are retained after the animation has finished playing), or both, which is the default value.
• iterations (optional): the number of times you want your animation to repeat. 1 is the default value, but you can pick any other number, and if you want your animation to repeat indefinitely, just set it to infinite.

You can also use the onfinish property to trigger an animation as soon as another one completes:

const anim1 = window.animatelo.shake('#headline1', {
  delay: 500,
  duration: 1500
})[0];
anim1.onfinish = function() {
  const anim2 = window.animatelo.wobble('#headline2', {
    duration: 1500
  })[0];
};

#3 Pose.js

Pose.js is an intuitive animation library tailor made for Vue, React and React Native. The documentation’s opening lines describe it as follows:

Pose for Vue is a declarative motion system that combines the simplicity of CSS transitions with the power and flexibility of JavaScript.

The way this library works is by defining possible states, or poses, for your component, a bit like CSS animations.

Pose has got tons of features, so let’s start with a simple example of a red box that scales up and then down on a click event:

new Vue({
  el: '#app',
  data() {
    return {
      isVisible: false,
      moving: true
    }
  },
  components: {
    Box: posed.div({
      pressable: true,
      init: {scale: 1},
      press: {scale: 2}
    })
  }
});

Inside your component’s JS section, or in the case of this simple demo inside the Vue instance, you need to add a components section. You then use posed. plus the name of the element you want to animate. The magic of posed is that it allows you to create animated versions of any HTML or SVG element. For example, posed.div() lets you build an animated div. I called the component that represents this animated div Box, but you can call it whatever you prefer.

Next, you add some properties that control your animation. The ones I used above are just a tiny fraction of what Pose.js makes available, and you can already achieve a nice effect with very little code. Let’s go through them one by one:

• pressable set to true indicates that the element can react to mouse and touch down events
• init allows you to set an initial CSS. property to a certain initial value, which then gets modified through the animation.
• press lets you set your chosen CSS property to the value you want the element to animate to when pressed (either by a mouse or touch down event). Pose makes available other cool interactive options like drag, hover, and focus.

In the template section, you add the Box component like this:

<div id="app">
  <Box class="box"></Box>
</div>

You can also configure custom transitions and take full control of the animation:

transition: {
  default: { ease: "linear" }
}

Inside each transition object you can specify a few properties like ease, duration, delay, and so on. The ease property affects the speed of the animation over the course of its duration and it’s super important if you aim for professional-looking animations. Pose offers a number of ease values:

• linear
• easeIn, easeOut, easeInOut
• circIn, circOut, circInOut
• backIn, backOut, backInOut
• anticipate
• an array of numbers to create a cubic bezier easing function

The default transition is tween, but by setting the type property you’ll also find other fun choices like:

• Spring, which maintains velocity between animations to create engaging motions that you can further fine-tune by adjusting stiffness, mass, and damping properties
• Decay reduces the velocity of an animation over its duration and it works beautifully for the special dragEnd pose that fires when users stop dragging an element on the page
• Keyframes allow you to set up a series of tween values
• Physics lets you simulate effects like velocity, friction, and acceleration.

Another feature of Pose that I like a lot is the way you can coordinate animations between parent and multiple children with ease. Whenever a posed component changes its pose, the change propagates through its children—even those which aren’t direct children.

#4 GreenSock (GSAP)

GreenSock, also known as GSAP (GreenSock Animation Platform) is a fantastic library for the creation of “ultra high-performance, professional-grade animation for the modern web.”

When it comes to web animation, there’s almost nothing that you can’t do with GSAP. Here are some of what I think are its strongest points:

• You can learn it in no time. Its API is intuitive and straightforward.
• The docs are excellent.
• It’s a mature library that’s been around for years.
• It’s got great cross-browser support that goes back to IE6!
• It works like a charm with HTML5, SVG, Canvas, jQuery, React, Vue, and more.
• It’s fast.
• It’s continually being maintained and updated.
• It’s got a super helpful community for support.

The API features you’re going to use the most are:

• TweenLite, which is GSAP’s foundation. An instance of this object handles tweening one or more properties of any object over time.
• TweenMax, which extends TweenLite adding extra bells and whistles.
• TimelineLite, a powerful sequencing tool inside which you can wrap tweens and other timelines to get full control of complex animations.
• TimelineMax, which extends TimelineLite adding more goodies like repeat, repeatDelay, yoyo, etc.

The syntax you need to use GSAP’s API is very similar in all four of the above objects, which really helps getting familiar with the library in a relatively short period of time:

/* tween an element from full opacity to opacity 0
in 1 second with a 2 second's delay */
TweenLite.to(element,  1,  {opacity: 0, delay: 2});
TweenMax.to(element,  1,  {opacity: 0, delay: 2});

/* create an instance of TimelineLite called tl
 which repeats the initial animation twice with 1
 second's delay in between tweens */
const tl =  new  TimelineLite({repeat: 2, repeatDelay: 1});
// add a TweenLite instance to the timeline that animates
// an element from full opacity to opacity 0 over 1 seconds
tl.add(  TweenLite.to(element,  1,  {opacity: 0})  );

// do the same as above, but using TimelineMax
const tl =  new  TimelineMax({repeat: 2, repeatDelay: 1});
tl.add(  TweenLite.to(element,  1,  {opacity: 0})  );

You can animate a property towards an end value, in which case you use .to() like in the snippets above. If you want to define the starting values instead of the end values, use .from(). Finally, to specify both starting and ending values of the tween, use .fromTo().

Check out Getting Started with GSAP on the library’s website for a friendly introduction.

#5 Anime.js

Anime.js is a lightweight and fast animation engine created by Julian Garnier. This is also a full-featured library you can painlessly integrate with Vue.js to create some really cool web animations.

Anime works with CSS properties, CSS transforms, SVGs, DOM attributes and JavaScript objects. It’s also very well supported and the docs are pretty sleek.

Here’s a snippet taken from the library’s GitHub page to get you started with the syntax:

anime({
  targets: 'div',
  translateX: [
    { value: 100, duration: 1200 },
    { value: 0, duration: 800 }
  ],
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 2000,
  loop: true
});

• targets lets you specify the DOM elements you want to animate.
• translateX, rotate, and backgroundColor indicate the properties on the element that you want to animate. Although this is not specific to Anime but to JavaScript more generally, notice how the CSS compound names, which in your CSS document are usually hyphenated—such as background-color—in JavaScript are camelcased: backgroundColor.
• Also, notice how translateX has been given specific duration values, both with respect to the initial and ending states and with respect to the other properties on the same object—for example, rotate and backgroundColor.
• duration indicates how long the tween is going to last.
• loop set to true means that the animation keeps repeating indefinitely.

Conclusion

I find Vue to be a truly animation-friendly framework. You’ve seen how you can create nice animation effects quite straightforwardly both with and without the use of an external library. However, integrating any one of the libraries listed here with Vue will give you animation super powers. There’s no end to what you can come up with and share with the world!