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.

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

Perfect, thanks Rodrigo

I would like to animate a series of SVG circles from a set of coordinates in one array to a set in another. I have created this repo that lays them out and does one of two animations / tweens (animationRed, animationGreen) based on their class based on a scrolltrigger. That works fine. Each circle has an id which the tween can use to identify them. What I'd like to do is add to those tweens, moving from the coordinates in circles to the ones in circles2 and then back again when scrolling back, based on the scrolltrigger. I'm keen to keep the two components separated as that makes the larger use case easier to manage. https://svelte.dev/repl/33ff20f203854e949518253d35147952?version=4.2.7 Many thanks in advance.

Thanks very much mvaneijgen. The timing of the animation does work in your code, but my actual animation is more complex (and actually comtains many circles drawn in a #each block), so I need to control it with the pointsShownNow variable rather than directly, hence my use of onUpdate and .progress().

I want to trigger an animation from a scrolltrigger in both directions, i.e it starts growing when the .intro class comes up into the viewport and then reverses when it scrolls back down again. I am hence looking to use Toggle Actions. I want the animation to continue unless the the class moves away. I can get it to work where its fully controlled by the scroll i.e. if the user stops scrolling, the animation stops, but I want the animation to complete or complete reverse once it has been triggered. In the code below, I've set it up with a separate scrolltrigger and tween, but you'll see commented out code where I tried to do it all in one. In the current version, it says "Cannot read properties of undefined (reading 'progress')" within drawStopSign, presumably because self.progress isn't defined. self.progress does work in the commented out consolidated version of scrolltrigger/ tween. Here is my code https://svelte.dev/repl/d09e192bca00453cae102eb91b4625c3?version=3.32.3