Jump to content


Timeline - starting tweens at specific, independent times

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello -


As always, thanks for the amazing tool.  I'm using TimelineLite to 'synch' some JS animations to an HTML5 video.  I can keep the two together by using the video's time change event to timeline.seek the identical time.


This works great!  Unfortunately, it's getting pretty complicated building all of my animations on a system where each subsequent tween is based on the previous one tween.  For instance, I was just sent a new version of my video and needed to move a tween in the beginning 'back' by 1.25s.  Then I had to go add 1.25 seconds to the following tween's delay to push it forward again.  Normally this is a great feature for animation, but not in my use case.


Is there anyway to use TimelineLite by setting hard time codes for tweens to start?  Like, Timeline.to(element, animationTime, { animationOptions }, startAt: 50) and this tween would always start at 50s into the timeline regardless of other tweens?  I understand this isn't the normal application for Timeline but I figured it can't hurt to ask.


Thank you so much for any help!

Link to comment
Share on other sites

Just found and experimenting with .insert function - looks promising!

Link to comment
Share on other sites

No, Don't use insert() it has been deprecated (but still works)


The position parameter can be used to add tweens at relative or absolute locations in a timeline.



tl.to(something, 3, {vars}, 5) // starts at absolute time of 5 seconds


t.to(something, 3, {vars}, "+=5") // 5 seconds after end of timeline

Many of the TimelineLite/Max methods use the position parameter. Detailed explanation in the docs for to(): http://api.greensock.com/js/com/greensock/TimelineLite.html#to()


Also, please watch the sequencing video: http://www.greensock.com/sequence-video/

Link to comment
Share on other sites

Perfect - thank you very much Carl.  I have watched the vid a while back but will rewatch to refresh my memory and keep the simple questions to a minimum. =)

Link to comment
Share on other sites

No problem. And don't worry, I love the simple questions ;)

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
  • Recently Browsing   0 members

    • No registered users viewing this page.