Skip to content
Go to file

SVG Animations with VueJS and TweenLite


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!

You can’t perform that action at this time.