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.
Micro-interactions are visual changes in response to a user’s interaction with an element or component, usually a click or hover or drag.
Animations are pieces of movement used for expressive or informative storytelling and usually serve less of a functional purpose than the other two.
These tools of motion allow us to:
Set tone and express emotion
Pull the user’s focus and attention toward something
Clarify narrative or information
Create or deepen context for an element and its relationship to others
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:
The Vue “app” (the Vue instance and related components) can be integrated into almost any kind of site – Craft CMS, WordPress, Drupal, Sitecore, or whatever fits your business needs
There are strict coding standards so that whoever works on your site next will be able to jump right in
It’s an HTML-forward framework with a relatively low learning curve compared to some other reactive frameworks
There are built-in features like reactive properties, class and style bindings, and transition elements, all of which are exceedingly useful when it comes to bringing motion to your site
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.
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.
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.
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.
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!
