Jump to content
GreenSock

MSCAU

Changed tween target before animation is ignored

Recommended Posts

I have a toolbar which can be either at the top or the bottom of the window (position: fixed). I use tlup and tldown tweens to transition between the two positions. I want this to continue working smoothly when the user resizes the browser (eg. by rotating their mobile device - hence the fixTop and fixBottom callbacks). Despite the fact I'm recalculating the pixel distance between the top and bottom of the screen before each pass (via the fixed_offset_top variable), once the window is rotated, it seems as though my animation is preserving some 'memory' of its previous tween target as it doesn't end up in the right place.

 

I've read this topic and applied clearProps:"transform" to some effect, but it's obviously not a complete solution to my problem:

 

See the Pen aaNvGY by MSCAU (@MSCAU) on CodePen

Link to comment
Share on other sites

Hi MSCAU!

 

Looking at your example Pen (which is very helpful, thanks), I don't see where you are listening to the window resize event.

 

In order for you to achieve what you are describing, you need to recreate your timelines every time the window changes size. You are correct in saying that GSAP is remembering the tween's positions - that's exactly what is meant to do.

 

So, you have to add an event listener for the window resize and trigger override the timelines you have with fresh ones.

  • Like 4
Link to comment
Share on other sites

Thanks, @Dipscom, that doesn't sound right. The function $('.floater').click(function(e) {...} runs before every animation and already sets the fixed_offset_top value. Having that value change triggered by a window resize event rather than a click doesn't sound likely to make any difference.

 

And as you can see here, it doesn't: 

See the Pen zJqPxN by MSCAU (@MSCAU) on CodePen

 
Maybe I'm not understanding what you mean by "recreate your timelines".

 

Edited by MSCAU
Added last sentence
Link to comment
Share on other sites

Hey MSCAU,

 

Indeed, I am afraid you have missed the crutial point.

 

It doesn't matter that you update your fixed_offset_top variable. GSAP only reaches out to read it when the timeline is initialized, not when it is played. Like you said yourself earlier on, it keeps those values 'in memory', it does not keep a reference to your variable. So, updating it has no effect whatsoever.

 

Again, all you need to do is create a new timeline whenever you want to change its parameters. See a fork of your latest pen bellow with an example.

 

See the Pen ZMWaxe?editors=0010 by dipscom (@dipscom) on CodePen

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Re-creating the timelines is a great solution, though I also wanted to point out that if your goal is to clear out any recorded starting values, you can simply invalidate() the timeline which will force it to re-record any starting values on the next render. 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Aha, the light bulb has gone off! I had no idea tweens are crystallized at the time of instantiation. Thanks for explaining that, @Dipscom.

 

I like @Greensock's suggestion too which led me to the apposite video on https://greensock.com/docs/TweenMax/invalidate and the solution to the problem: 

 

See the Pen oPxEwY by MSCAU (@MSCAU) on CodePen

 

 

 

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