HTML5 / JS

Flash

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

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

May 7th 2013 |Carl

103278

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

Related Content

August 28th, 2014

Timeline Tip: Understanding the Position Parameter

The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even nested timelines.

Getting Started with GSAP

Just a few of the companies that rely on GreenSock products every day.

“ If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with. ”

Thomas Summerall

“ There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects. ”

Petr Tichy

“ The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation. ”

Ben Rugg

“ It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use? ”

Elliot Geno, @ElliotGeno

“ I am more and more amazed every day, and very glad that I decided to get a business license. ”

LilaQ

“ GreenSock has encouraged me to play with the code, to dream up new and exciting things to do. ”