Animation and Vue.js

Rate this content
Bookmark

There's a lot to gain from adding animations to your site or app. Beyond their visual appeal, you can guide the user's attention, cover up slow to load components and elements, and reveal sections of a page without the user wondering where it came from. This talk will cover the built-in ways Vue.js helps you animate your site, and how for more complicated animations you can hook into third party libraries. It'll also cover the basics of animation itself – what to animate, what not to animate – and how you can use animations to enhance your website without harming the experience of people with disabilities.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

The speaker is Callum, a creator developer based in London.

The main topic of the talk is about using animation in Vue JS apps to improve user experience and functionality.

Animations can enhance visual appeal, guide users' attention, and improve perceived load times.

Too many animations can make the site unusable and can be especially problematic for users with disabilities such as ADHD or vestibular disorders.

The v-show directive is used to conditionally render elements in the DOM by toggling their visibility using the display property.

v-show toggles the display of an element using CSS, keeping it in the DOM, while v-if completely removes and adds the element from the DOM.

CSS transitions allow you to change property values smoothly over a specified duration. In Vue JS, this can be implemented using the transition component and associated CSS classes.

CSS animations allow for more complex sequences of animations using keyframes, defining multiple stages of an animation, unlike CSS transitions which only define start and end states.

JavaScript animations are preferred for more complex animations that involve multiple elements or require precise control over timing and sequencing, which can be cumbersome with CSS animations.

GSAP (GreenSock Animation Platform) is a JavaScript library used to create high-performance animations. It is often used in Vue JS for more complex animations that are difficult to achieve with CSS alone.

Callum Macrae
Callum Macrae
32 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk covers animation in Vue JS apps, including CSS animations, JavaScript animations using the GSAP library, and handling multiple elements with transition groups. The Talk also discusses different kinds of movements, state transitions, and animating numbers and SVGs. Overall, it provides a comprehensive overview of animation techniques and tools for enhancing Vue JS apps.
Available in Español: Animación y Vue.js

1. Introduction to Animation in Vue JS App

Short description:

Today, I'm going to be talking about animation in your Vue JS app. How you can use animation to improve your app, why you should do it, and when you maybe shouldn't be animating your app. Animations are a good way of guiding attention or distracting users. If you add too much animations to your site, they will be totally unusable. No one will be able to make it through your text.

Today, I'm going to be talking about animation in your Vue JS app. How you can use animation to improve your app, why you should do it, and when you maybe shouldn't be animating your app.

My name is Callum. I'm a creator developer based in London. I've written a book called Vue JS Up & Running published by O'Reilly Media. If you're on Twitter, that's my handle, feel free to give me a follow.

So, I figured we'd jump straight in with the why. Why would you want to add animations to your site? So, beyond the obvious visual appeal, like animations look good. That's a valid reason to add animations. There are a few functional reasons that you might want to add animations to your site. So, animations are a really good way of leading users around your app. So, for example, you might have a call to action you want them to look at, or you might want them to go to the next page. They might have made a mistake on a form and you want to alert them to it. Animations would help in these scenarios, by guiding the user's attention towards this part of the page.

So, as I just mentioned, animations are a good way of guiding attention or distracting users. So, another case would be you've got a page that's loading quite slowly. If you display a loading sign or some sort of animation, the user will perceive the page to have maybe loaded a bit quicker. But of course too much distraction is very much a bad thing. If you add too much animations to your site, they will be totally unusable. No one will be able to make it through your text. And this is especially bad for people with some disabilities, such as people with ADHD or people with some vestibular disorders who will be really badly affected by too much animation. So you've got to keep an eye out for that.

So I figured we could make most of this talk just a big demo. I'm not so big on slides, even though they look like slides. So here is our first thing. It's just on this page, it's this menu here. So I'm sure if you've been on the internet before, which I figure you have, especially if you're watching this streamed, you'll have seen this kind of menu before. You click on a button and menu comes in from the side. And this is a thing, this is probably one of the animations I've implemented most commonly in VGS apps. So let's have a look at the code which powers this.

2. Animation in Vue JS App

Short description:

We've got our menu open state, which is either true or false. This is our menu, which we're using the vshow directive. The transition component adds classes to the menu element for CSS transitions. The menu is initially off-screen and translated in from the right when added to the DOM. The CSS transition property is used to animate the transform property, taking 0.3 seconds and using easing. The leave class has a different animation. The menu moves slowly and then speeds up when it goes out.

Here I'll just talk you through it briefly. We've got our menu open state, which is either true or false. Then here, this is our menu, which we're using the vshow directive so that when the ref is true, then the menu is open, otherwise it's not added to the DOM.

And you'll see we've got this transition component wrapped around it. So what this does is this is a built-in component in Vue. This means that when the state changes, when the menu open changes from false to true, it isn't just added to the DOM, it is added to the DOM, but it's got a bunch of classes added to it, which you can use to, in this case, add a CSS transition even.

So here, what we can see is this class is, so when this element is added to the DOM, it's added with this enter from class. So it's got a CSS transform, which translates it to the right by 100%, which in this case would be the width of the menu. So effectively, when it's just added to the screen, the menu is just off screen here. So, you can imagine it's sat slightly off screen. You press the button, it comes in on screen. That's what this translate means, translate x 100%, translate it in the x direction, 100%, which in this case is 100% of the width of this.

So, the next thing Vue does once it's added this class and added this element into the DOM, is it adds this class called interactive, which we used to add a transition, which we use a CSS transition, and then it removes this class so the new transform will be unset, so effectively, it will be translated nowhere. So it will be its natural position in the DOM, which is here. So what the CSS transition property does is, in this case, we're saying transition the transform property, take 0.3 seconds to do it and use this easing. I'll get back to easing in a second. But effectively, what this does is you can give it quite a few CSS properties, and it means that when it changes, don't change it immediately, transition it from the old value to the new value in this time. So in this case, we're saying we want our CSS transform, which is going from translation to the right to nothing, because the class is being removed, and taking 0.3 seconds to do it. So the explanation is a little convoluted. But hopefully in the context of seeing what the menu does, that makes sense. That's the enter class. We've got a slightly different class for leave. So you can just combine these into one depending on what you want to do. So you'll see on some of my later examples, I'll have enter active, and leave active in the same rule. And then I'll just have this, the transform and 0.3 seconds. In this case though, we have some easings. So we've got ease out on the way in, and ease in on the way out. And that won't make sense if you don't know what it means. So I will show you. So if you watch this menu come in and out, you'll see when it goes out, it starts off moving slowly, and then it speeds up.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance