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
Sign in to follow this  


| GreenSock
112340

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

We consider it a privilege to serve you. Glad you're here.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×