Updating stored timeline values

[x0b]

I have an absolutely positioned element that is animated to a position at the bottom right of the browser where it should stay. This works fine but I am running into a problem when the browser is resized, the end position is recorded at the old bottom right position and I need the element to go to the bottom right of the browser as it is after the resize.

 

Here is a codepen to demo what I mean. If you run the tween, then resize the stage area and then restart the tween you'll see that the box doesnt animate to the bottom right of the browser as required, but instead to the old bottom right position.

 

See the Pen jdqkt by anon (@anon) on CodePen

 

I guess what I need is to somehow update the tween on that part of the timeline when the browser is resized, but I don't know how or if this is even possible.

 

Any help would be greatly appreciated! Thanks!

[Carl]

Thanks for providing the CodePen demo.

 

The easiest thing to do is just re-generate your timeline if you need to update values each time you restart:

http://codepen.io/GreenSock/pen/hwFpj

[x0b]

Unfortunately I can't as it's part of a timeline that can be scrubbed backwards and forwards. I don't think I'd be able to regenerate it without causing lots of other problems.

[Carl]

I'd still suggest you try it. Assuming this timeline would only be re-generated on a de-bounced  window.resize() I don't see it  being a problem.

Unless you have hundreds of tweens I don't think it would add any noticeable overhead.

 

If you only want to update a single tween in a timeline, you can 

• create a reference to that tween: var someTween = TweenLite.fom(blah, 1, {})
• add that tween to a timeline: tl.add(someTween)
• when necessary invalidate the tween someTween.invalidate()

 

http://codepen.io/GreenSock/pen/4dd801bb6538c22b1035887d46856c2a/

[x0b]

Hi Carl,

 

Thanks for taking the time to help on this. This tween is one tween in a pretty huge timeline that contains other timelines. I'm controlling the playhead using the scroll position of the window and the user can go forwards and backwards at any time. I should have been clearer with this I'm sorry. I don't want to force the user to go all the way back to the start of the main timeline if they adjust the window size.

 

Your demo works fine for restarting the tween, but if I change the restart to reverse (I can't fork your Codepen for some reason) , it obviously breaks because the values have been cleared and invalidated.

 

The likelihood of the user scrubbing back over the timeline to the point where this tween occurs after adjusting the size of the window is minimal, but this is the sort of thing my client is likely to do!

 

So I guess what I really need to do it somehow adjust the existing tween values upon window resize so the tween will look correct when it is scrubbed over again instead of jumping to the old stored values.

[Carl]

 

I don't want to force the user to go all the way back to the start of the main timeline if they adjust the window size.

 

 

Understood. I assumed the restart button was just a mechanism in the demo to illustrate that new tween values (end/start) were updated.

 

In your real project you can record the current progress() of your timeline each time the window is resized and when you are done resizing and adjusting tween values just tell the timeline to jump immediately to that pre-resize progress() (which will prevent the user from seeing the whole timeline play again)

 

Perhaps invalidate() wasn't the best solution.

Below I just inject a fresh tween where the old tween was:

 

http://codepen.io/GreenSock/pen/AhoyL/

 

You will notice that you can restart from the beginning and reverse from the end and resize the window whenever you want. The red box will always start/end where it should.

 

---

 

Also, for responsive animation like this, our users have reported great success using percentage-based positioning values. 

[x0b]

Hi Carl,

 

Thanks so much, the last solution is working perfectly 

 

As advised I added in a bit to record the progress prior to reinitialising the tween and then setting it

immediately afterwards so the element tween was in the same place, and now it works exactly as I needed.

 

I did have a quick fiddle with percentage based positioning, would this eradicate the need to reinitialise the tween or would I still need to follow that process?

 

This element is the only one in the site that reacts to the browser size, everything else is contained in a fixed width div so I haven't needed to use percentages previously.

 

Once again thanks so much!