Video: Sequence JavaScript Animations Like a Pro with GSAP's TimelineLite

Sign in to follow this   Followers 0

This video walks you through some common problems that professional animators face every day and shows you how GSAP’s TimelineLite tackles these challenges with ease. Although GSAP is very powerful and flexible, the API is beginner-friendly. In no time you will be creating TimelineLite animations that can bend and adapt to the needs of the most demanding clients and art directors. Watch the video and ask yourself, "Can my current animation toolset do this?" Enjoy.

Video Highlights

• Tweens in a TimelineLite naturally play one-after-the-other (the default insertion point is at the end of the timeline). No need to specify or update the delay of each tween every time the slightest timing changes are made.
• Tweens in a TimelineLite don't need to play in direct sequence; you can overlap them or easily add gaps.
• Multiple tweens can all start at the same time or slightly staggered.
• Easily to rearrange the order in which tweens play.
• Jump to any point of the timeline to finesse a particular animation. No need to watch the whole animation each time.
• Add labels anywhere in the timeline to mark where other tweens should be added, or use them for navigation.
• Control the speed of the timeline with timeScale().
• Full control over every aspect of playback: play, pause, reverse, resume, jump to any label or time, and much more.

Unlike jQuery.animate() or other JS libraries that allow you to chain together multiple animations on a particular object, GSAP’s TimelineLite lets you sequence multiple tweens on multiple objects. It's a radically different and more practical approach that allows for precise synchronization and flexibility. If you are still considering CSS3 animations or transitions for robust animation after watching this video, please watch it again

Check out this Pen!

If you are wondering what "autoAlpha" refers to in the code above, its a convenience feature of CSSPlugin that intelligently handles "opacity" and "visibility" combined. Recommended reading:

• Main GSAP JS page
• Jump Start: GSAP JS
• Speed comparison
• Cage matches: CSS3 transitions vs GSAP | jQuery vs GSAP
• jQuery.animate() with GSAP: get the jquery.gsap.js plugin!
• 3D Transforms & More CSS3 Goodies Arrive in GSAP JS