Tweening with GSAP inside Vue

I really enjoy working with Vue.js, because it's easy to setup and has a great community.
I've also enjoyed building interactive experiences using Adobe/Macromedia Flash in the past. One of best thing in Flash, was animations. This could be done using the the timeline interface in Flash itself. But it was also possible using ActionScript, by using libraries such as Tweener, Twease & TweenLite.

TweenLite has been succeeded by GreenSock Animation Platform (GSAP).It still has the almost the same syntax, and is still compatible with TweenLite.

Setup

If you have a vue project it's really easy to start using GSAP, just install it using NPM

npm add gsap

or use from a CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>

Once you've included GSAP in your project, you can start using it inside your components.

Here's an example of a box being rotated and changes background color. The animations overlap, have different durations and ease.

The timeline.to expects 3 arguments, the last one is optional.
.to( target:[ Object | Array | String ], vars:Object, position:[ Number | String ] ) : self

I use the this.$el reference to animate the component node, I specify the attributes I want to animate. And for the background color animation I also specify a relative position. As soon as the component has been mounted the animation starts, using the Vue's mounted lifecyle hook.

By creating animation using JavaScript you can create a number of animations easily, for example fading in letters, changing to multiple colors, and animating a group.

In this example all the spans are animated, then the component itself changes font color 6 times and it animates out using a scale and alpha 0.

Note that I use timeline.from the first time, and timeline.to the other times. This way I don't have to specify the initial styles in CSS.

As you can see the timeline is really powerfull, and it's easy to use together with Vue.

I've also created a GitHub repo with these examples: https://github.com/TimvdEijnden/vue-gsap-example