Jump to content
GreenSock

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

Recreating Timeline Tweens with Updated Values

Go to solution Solved by Carl,

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

Imagine I have one long timeline and many of the tweened properties are dynamically calculated. For example; elem1y, elem2y...

tline = new TimelineMax()

.add([
    TweenMax.to("#elem-1", 1.5, {y: elem1y}),
    TweenMax.to("#elem-2", 1.5, {y: elem2y})
])

.addPause()

.add([
    TweenMax.from("#elem-3", 1.5, {y: elem3y}),
    TweenMax.from("#elem-4", 1.5, {y: elem4y})
])

What is the best way to update the timeline if those values are recalculated?

 

The issue I am currently facing is that simply recreating the timeline leaves lots of elements values changed, thus recreating the timeline as I originally did causes the offsets to be relative to incorrect values.

 

I've been messing with invalidate(), clear(), reset() but no luck yet.

 

Thanks!

Link to comment
Share on other sites

Any chance you could provide a very simple codepen to demonstrate what you're talking about? I'm particularly curious to understand "...causes offsets to be relative to incorrect values". If you want your values to go back to their beginning, you could seek(0).kill() the timeline to get it back to the beginning and kill it before recreating it. 

 

Another option is to use getTweensOf() to get an array of tweens of a particular object and update the vars directly, like tween.vars.y = newValue and invalidate() the tween in case it already started - that forces it to re-initialize and read its vars on the very next render. 

 

You could also save references to the tween instances themselves and update them accordingly (their vars) and then invalidate(). 

  • Like 2
Link to comment
Share on other sites

[cleared]

Edited by tgangemi
Link to comment
Share on other sites

  • Solution

First, very nice site. Great Job!

 

From resizing the window it appears as if you are resetting the timeline to the beginning and then jumping again to the time that the timeline was already at.

Noticing that some elements seem to shift as well. Did you implement GreenSock's suggestion above? 

 

After seeing your demo, I would still offer the same basic advice, rewind the timeline, invalidate the tweens and rebuild the timeline with new values. 

 

Unfortunately it is very time consuming to try to make sense of what is going on behind the scenes in a site like that with no way to test or edit the code.

This is why a reduced CodePen demo is so important. More details here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ 

 

In addition, check out our new xPercent an yPercent properties that let you do some really nice things we percent-based translations. This really helps in responsive design. http://greensock.com/gsap-1-13-1Notice how the demos on that page allow you to resize the "viewport" but the animation code never needs to be updated. Pretty cool.

  • Like 1
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.
×