Skip to content

snipcart/vue-animation-demo

Repository files navigation

SVG Animations with VueJS and TweenLite

vue-js-animations

This repo contains the code for a demo from our blog post "Creating Vue.js Transitions & Animation: Live Examples".

"An animation is a more complex, usually multi-step and sometimes continuous change in appearance. Animations will often call on JavaScript to pick up where CSS' lack of logic drops off. It could be to add a class and trigger the animation or to make complex state transitions that reflect onto the DOM.

The possibilities and approaches are virtually endless, so I've chosen one of my favourite techniques to showcase how you could animate your data with Vue.js.

Essentially we're going to use GSAP's TweenLite library to apply easing functions to our state's changes and let Vue's lightning fast reactivity reflect this on the DOM. Vue is just as comfortable working with inline SVG as it is with HTML."

Read full tutorial

Try it on CodePen

Enjoy folks!