Jump to content
Search Community

How to clear cached prop values and recalculate?

Visual-Q test
Moderator Tag

Go to solution Solved by Visual-Q,

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

I am trying to figure out best practices for dealing with flushing cached values.

 

For example in the animation below which is activated by a scroll magic trigger I have an object animate from a height value based on screen height ( using vh units) to a height based on screen width, in this case I've used viewport width units to get my value. 

 

When the animation runs it converts the initial value (vh) to vw for animation (which is brilliant), and caches the value so that if the screen width changes the cached start value is then incorrect when scroll magic reverses the animation.

 

What's the best way to get a tween or timeline to discard cached values and recalculate whenever it runs or reverses. I know that in individual usage cases different techniques may be more efficient but is there a general sledgehammer technique I can use to just flush cached values and force recalculation that doesn't involve clearing props that are currently applied.

var newProd_tween = new TimelineMax();
      newProd_tween.fromTo('#new-product-container', .5, 
            {height: '20vh',
             ease: Linear.easeNone},
            
            {height:  100/7 +'vw',
             paddingLeft: '2%',
             paddingRight:"2%",
             ease: Linear.easeNone});
      
// init ScrollMagic Controller
    var controller = new ScrollMagic.Controller();
    
    // New Product Scene
    var newProd_scene = new ScrollMagic.Scene({
      triggerElement: '#new-product-trigger'
    })
    .setTween(newProd_tween);
    
    controller.addScene([
      newProd_scene,
    ]);
}

Link to comment
Share on other sites

There's an invalidate() method that you can call on any tween or timeline that essentially flushes any stored starting values and forces the animation to re-initialize on the very next render. 

 

Just beware that, for example, if you have a to() tween that finishes and then you invalidate(), that doesn't change the playhead position nor does it force it back to the original values. To do that, you can just animation.progress(0).invalidate().

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

Thanks Jack,

 

I was looking at invalidate but couldn't get it working.

 

Just to confirm I'm applying it correctly is the following how I would add it, or does it need to be attached to a callback. 

var newProd_tween = new TimelineMax();
      newProd_tween.fromTo('#new-product-container', .5, 
            {height: '20vh',
             ease: Linear.easeNone},
            
            {height:  100/7 +'vw',
             paddingLeft: '2%',
             paddingRight:"2%",
             ease: Linear.easeNone});

       newProd_tween.invalidate();

I'm not actually looking to restart the playhead progress manually as that's under control of the scroll magic trigger. I just want to clear the cached start values so when the animation is reversed it is forced to recalculate from the end values back to start values if this is possible.

 

 

If invalidate is applied correctly in the above code I'll play around with it and figure out why it's not working. I may have to delve deeper into what Scrollmagic is doing here. I'm presuming that scroll magic just plays the animation forward when triggered then reverses the playhead when the trigger is crossed in reverse but maybe there is more happening here.

 

One other thing that occurs to me is maybe this can't be done in one fromTo tween? i.e. reverse calculating the fromTo values

Do I perhaps have to have one tween to the end values and a new tween back to the initial values to achieve this?

Link to comment
Share on other sites

Well, it's applied correctly in the sense that you're calling it on an animation, but the key here is WHEN you call it. In your example, you're just calling it immediately after the tween is created, so there's virtually no point in doing that. You'd want to invalidate() whenever you actually need to clear out the values that were in there from when the tween started running. For example, if your window resizes, you could call invalidate() at that time.  That way, on the very next render the tween is going to re-record starting values and the "vw" and "vy" stuff will be based on the size of the window at that point. 
 

Make more sense now? 

  • 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.
×
×
  • Create New...