Imarc

Intro to Animations with Vue

Megan Valcour, Front-end Engineer
Tim Spears, Senior Front-End Engineer
Posted on Mar 29, 2022

In the first of a three-post series, Tim and Megan talk about how to build motion into your sites with Vue.js.

What is animation?

So what do we mean by “animation”? Often, what we’re referring to is actually motion or movement. This can then be broken down into three tools: transitions, micro-interactions, or animations.

Transitions are how a component or group of components enter and exit the viewport or react to a change in state.

Beacon Hill Staffing Group Website Redesign

Micro-interactions are visual changes in response to a user’s interaction with an element or component, usually a click or hover or drag.

Magnitude, Task Runner

Animations are pieces of movement used for expressive or informative storytelling and usually serve less of a functional purpose than the other two.

Skillsoft, Lean into Learning

These tools of motion allow us to:

  1. Set tone and express emotion

  2. Pull the user’s focus and attention toward something

  3. Clarify narrative or information

  4. Create or deepen context for an element and its relationship to others

  5. Pique the user’s interest

Understanding the goal of motion

Motion that is used too often, is aggressive, or does not have a clear purpose can make the site confusing, overwhelming, and hard to interact with. Consider your site’s main audience, what kind of devices they use to view the site, and the primary purpose of the site. A marketing website selling sports cars to CEOs on large desktop monitors will be very different from a patient portal for accessing health information quickly from a mobile device.

The principles of motion

You must understand the basic principles of motion in order to choreograph your vision clearly. Many of the principles we use in choreographing a dance, staging a scene for a movie, or practicing yoga are the same that apply to creating motion for the web:

  • Duration

  • Speed

  • Delay

  • Direction

  • Easing

  • Repetition

Google’s Material Design documentation is a fantastic resource for more information on these principles.

So, why Vue?

When it comes to bringing motion to a site, Javascript can pick up where CSS ends.

With Javascript, we can:

  • Trigger changes in styles based on an event (like a button click, scroll, page loading, entering text into a form field, etc.)

  • More effectively juggle different viewport sizes to keep our animations sleek and effective regardless of the size of the screen

  • Coordinate multiple animated elements,

  • Choreograph complex timelines, sequences, and easings

At Imarc, we use Vue.js, which is a reactive Javascript framework. Here’s why we use Vue:

While we prefer Vue at Imarc, don’t be afraid to reach for the simplest tool – not every motion solution requires a robust javascript library.

Into the weeds of Vue

Reactive properties

Vue.js is a reactive framework. Within each Vue instance, there is a model of data – whenever the data within that model updates, the view reacts.

See the Pen Vue Animations: Reactive Properties Demo by Imarc (@imarcagency) on CodePen.

Vue Animations: Reactive Properties Example

In the CodePen above, we have data (the count) that updates based on a setInterval callback. Whenever that count changes, the view reacts and updates to the new number. More advanced versions of this can be used to animate countdowns until a sale ends, count-ups on how many customers are using products, the time left until a conference or event, and more!

Style and class bindings

Vue also comes with built-in style and class bindings. These allow content to react to the data (like the number in the above example) and the appearance of anything within that instance.

See the Pen Vue Animations: Class/Style Bindings Demo by Imarc (@imarcagency) on CodePen.

Vue Animations: Class/Style Bindings Example

In this CodePen, we have used the example above as a foundation, but also takes advantage of Vue’s computed property to assign a color to the number (numberColor) based on its proximity to the end of the count. Then, using Vue’s style bindings, we bind the CSS color property to the number.

Now when the count updates, the number and the numberColor both update, and the view is changed as a result.

Transitions

Using class and style bindings alone are excellent options and allow us to bring dynamism to a site. There are also pure CSS options to style the transition between those elements and their styles.

However, when we start juggling multiple elements that are moving in and out of the viewport, we may want to reach for another great part of Vue: the <transition> and <transition-group> elements.

Transition element

The transition element is used to control how (timing, effect, appearance, etc.) an element enters or leaves the DOM. Common uses of this can include dropdown or slide-out panels in a navigation menu, the fading or bouncing in of a modal, or the appearance of new sections of a site on scroll.

See the Pen Vue Animations: Transition Element Demo by Imarc (@imarcagency) on CodePen.

Vue Animations: Transition Element Example

In the above CodePen, we keep the same functionality as before – color changes and counting down – but we use Vue’s <transition> element to help unify timing and easing among the multiple elements within our countdown.

TransitionGroup element

The transition-group element is used to control how an element is added, removed, or moved around within an iterated list of items. Think of sliders and carousels, or revealing the results of a search or filter on a group of items.

See the Pen Vue Animations: Transition Group Element Demo by Imarc (@imarcagency) on CodePen.

Vue Animations: Transition Group Element Example

To showcase <transition-group>, we have altered our countdown in the CodePen above to show each number as a card within a grid. As the countdown continues, each card disappears until only 0 remains. <transition-group> here is used to control the exit of each card from the view in relation to the other cards.

Looking ahead

This is the first in a series of three posts. We’ll be back soon to build on these principles and create even more animations triggered on scrolling alone. Later, we’ll discuss how advanced animations are possible when pairing Vue with libraries like GSAP and Anime.js.

Have a motion project you need help with? Imarc is here and ready to help. Let's talk!