DEV Community

Rahul Jain
Rahul Jain

Posted on • Originally published at rahuldkjain.github.io

let's animate minion using gsap

This is the fourth post of 10 Days of Animation and I am loving it. Today, I'll walk you through timeline functionality of gsap.
As the name suggests, timeline feature lets you animate in sequence. The flexibility gsap provide makes it even more awesome.

I used timeline to animate minion like this.

Cool right!
If you are curious to know how to do such stuff, please read the whole article.

If you look carefully, you'll understand that the animation combines of multiple animations one after the other. Let me make this simple for you. The animations used in sequence to make the animation visually interesting are:

displayBody()
bringGoggles()
displayGoggleShadow()
displayDungaree()
displayEyes()
moveEyes()
displayHand()
jump()
displayLegs()
displayShadow()
displayMouth()
displayHair()
blinkEyes()
Enter fullscreen mode Exit fullscreen mode

The best part is that you can animate these sub-animations individually and then combine it using timeline.

The syntax look like this

var master = new gsap.timeline({repeat: -1, repeatDelay: 0.3})
Enter fullscreen mode Exit fullscreen mode

To manage the timings, labels or checkpoints are used. See how I used it.

master.add('checkpoint-1')
master.add(displayBody(), 'checkpoint-1')
master.add(goggle(), 'checkpoint-1+=0.2')
master.add('checkpoint-2')
master.add(displayGoggleShadow(), 'checkpoint-2-=0.3');
master.add(displayDungaree()).add(displayEyes()).add(moveEyes(-10)).add(displayHand('.left-hand'));
master.add(moveEyes(10)).add(displayHand('.right-hand')).add(moveEyes(0))
master.add('checkpoint-3')
master.add(jump()).add(displayLegs()).add(displayShadow(), 'checkpoint-3');
master.add(displayMouth(), 'checkpoint-3+=0.8').add(displayHair(), 'checkpoint-3+=0.8');
master.add(blinkEyes())
Enter fullscreen mode Exit fullscreen mode

This looks simple, I am telling you this sole feature takes the animation to a next level.
I am coming with more crazy animations in the coming days.
Stay tuned.

Happy Animating!

Discussion (0)