Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

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


| GreenSock
110243

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

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 ;)

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:

Get an all-access pass to premium plugins, offers, and more!

Join the Club



User Feedback

Recommended Comments

Nice job professor Schooff!! ;-) I'll be waiting for the next lesson, keep up the good job guys. Cheers, Rodrigo.
Link to comment
Share on other sites

Thank you!! Nice work Carl, I'm very happy to see a new GSAP video tutorial and I really like the format using Codepen to watch live changes. Keep up the great work! Azuki
Link to comment
Share on other sites

This came along at just the right time for me. I have a client looking for somehting like this in HTML5 instead of Flash... I am a Flash developer of 13 years' standing. This looks like it will allow me to switch without breaking stride.
Link to comment
Share on other sites

Really nice tutorial ! I'm wondering if it could be possible to get a param of an object directly in the tween. Let me explain. For example, I want the wrapper to appear from the top. This is what I'm doing : var h = $('#demoWrapper').height(); and use it in the tween tl.from("#demoWrapper", 0.5, {top:-h}); But would it be possible to dynamically get the property of the object we are tweening in GSAP with a similar syntax ? tl.from("#demoWrapper", 0.5, {top:'-{self}.height'});
Link to comment
Share on other sites

Ibineau, that's a cool idea but unfortunately it just isn't realistic due to some technical reasons, not to mention the kb it'd eat up (and we try very hard to keep file size down and performance maximized). For most basic properties, it'd be relatively easy, but what about special properties and plugin values? There are some that are non-trivial to grab/calculate, and adding this layer of parsing would be rather cumbersome. I appreciate the suggestion, though. We'll definitely keep it in mind as a possible future enhancement, especially if many people request it.
Link to comment
Share on other sites

Guest Tutorial: Create Apple navigation using Greensock

Posted

[...] Sequence JavaScript Animations Like a Pro by Greensock [...]
Link to comment
Share on other sites

Can you time it to an audio player? I've been trying to time animations to match with mediaelement.js & it's not going well. issues with sound players and mobile devices, ie7, etc etc, and none of them time to audio. I'd be a happy customer to buy such a thing.
Link to comment
Share on other sites

Sorry to "hear" about the audio problems (sorry, couldn’t resist). Frankly, I haven't dealt much with audio in HTML5 yet, but my understanding is that it's a huge pain right now. I'm sure it’ll get better eventually. We may tackle something like that in the future, but right now we’re staying laser-focused on animation. You should be able to synchronize audio with a TimelineLite/Max by simply using a setInterval() (or something like that) to poll the audio's time and adjust the timeline’s time(). I hope that helps (at least a little). Happy tweening!
Link to comment
Share on other sites

Guest Michael Thorne

Posted

That's a great solution for the audio syncing. You would basically just play your audio and use the timeline of the audio file to dictate the timeline of the animation. If you have player controls like fast forward, rewind or scrubbing available on the audio (or video!), then the animations would always stay synced. You could even scale your animations timeline to match the timeline of the audio file.
Link to comment
Share on other sites



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×