Updating Animation on Change of Height / Width (Svelte)

[Colourblue]

I have a series of animations triggered by a scrolltrigger (the redStep).  The animations are created in onMount and then refreshed using ScrollTrigger.refresh() on change the resize event.  They work initially, but don't re-calculate using the new height / width when I make the window smaller or bigger.

 

I have attached a simplified version of my code.  The full version calculates the underlying from and two coordinates in a more complex way, but it is the scales that are not re-calculating so that is what I have included here.  

 

https://svelte.dev/repl/33ff20f203854e949518253d35147952?version=4.2.8

[mvaneijgen]

Does using function based values solve your issue? I'm not sure what the red dot should do, but I know that when using function based values, they will get recalculated on refresh of the ScrollTrigger https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values

 

You could also set invalidateOnRefresh: true, on the ScrollTrigger. Hope it helps and happy tweening! 

 

https://svelte.dev/repl/c42f227cf165445f8c5f5e2edcdb50b3?version=4.2.8

[Colourblue]

Thanks @mvaneijgen.  Adding invalidateOnRefresh: true to the more complex actual use case does the trick 😀.  Why does it need that given that I am calling ScrollTrigger.refresh() on refresh?

 

I can see this what the docs say, but I am surprised ScrollTrigger.refresh() doesn't do it.

 

 

.refresh( ) ;

Forces the ScrollTrigger instance to re-calculate its start and end values (the scroll positions where it'll be activated).

 

 

invalidateOnRefresh

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

[mvaneijgen]

1 hour ago, Colourblue said:

This flushes out any internally-recorded starting values.

Because of this. GSAP is highly optimised and it will not do things unless you specifically tell it to. The page loads (or your code executes) and it will record all the values it needs to do its thing. Then on a refresh it sees it already has fired all the logic and will not do it again . I think if you use function based values eg https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values it will also refresh the values, because that is a way of telling .refresh() you  want new values, otherwise its just "ok, I've run that function already, and have stored the value for you!" 

 

Hope it helps and happy tweening! 

[GreenSock]

Yes, sometimes you wouldn't want it to flush the values and force all the tweens to re-calculate based on new values. That's why invalidateOnRefresh is opt-in.  Plus obviously it requires more processing to do all that, and we put a pretty big emphasis on performance around here