adamo

OK so the solution was easy Just refresh all triggers before the page leaves swup.hooks.on("visit:start", () => { ScrollTrigger.getAll().forEach((t) => t.kill(false)); ScrollTrigger.refresh(); });

@Rodrigo Thank you for the tips I'll try the context part tomorrow and hopefully this will help. As for the After double checking this occurs only on the development environment so hopefully it'll stay this way Update: I've notices that this is not the only issue on the site so it has to do mostly with swup because on the products page first load this part shows correctly When moving to other page and returning to products the text is gone. So the investigation continues

Yep I'm using swup, that's why it was hard to replicate this using codepen. I've notices another thing that when scrolling up very fast the enter animation isn't reverting. Maybe it has to do with this (on the attached code pen you can see this). You mentioned resetting Scrolltrigger do you mean with thew ScrollTrigger.refresh() method?

I've replicated it as much as i could the problem as far as i can tell is that by scrolling up the first animation isn't reversing (leaving the trash bag) https://codepen.io/depcore/pen/OJGLXZV

Hi. I've recently encountered a problem where the scrolltrigger animation starts at a wrong place when transition is used (swup). The initial animation starting points are ok the website address is https://cedo.depcore.agency and the You can see the problem on this video https://www.dropbox.com/scl/fi/ckuvcm670lpkedun5vgna/scrolltrigger.webm?rlkey=shs49mb09k59f61plmcq7ys8t&dl=0 Not sure what has cause it and how to fix it.

Yes exactly. Stupid mistake on my part Thank you.

Hi. Im using a loop to set variables for a speedometer animation. In the codepen the're three instances of an svg - the idea is to get animation properties from data-attributes. The arrow is animating properly but the percentage amount stays the same for all instances. As a side note how to make the mask 0% at the start? So the green fill wont be visible when starting the animation.

Thank you @Rodrigothis got me on the right track, the're still some details, but I could show some version to the client at the deadline.

Yes. After the last slide with numbers I want the next section <div class="bag-reverse"><canvas id='bag-canvas-reverse' class='full-page'></canvas></div> to start at the top of the window - initially covering the previous section so the next transition seems like you're getting out ot the bag. Right now the bag-reverse section scrolls to top of the window to start the animation.

Hi. I'm struggling to wrap my head around reversing the animation on leaving the sequence. The idea is to leave the trash bag on finishing the sequenced animation. I was trying to add another canvas section but the complexity grew and I do more errors which broke the first sequence. So my question is more on the approach suggestions then a coded result. I've worked with this for a while and right now the only problem I have is to pin (start) the next section <div class="bag-reverse"><canvas id='bag-canvas-reverse' class='full-page'></canvas></div> from the top so both in and out animations would be almost seamless.

Than you for your help. I'll play around with it.

Thanks for your help. Its a nudge in the right direction, the problem is the content is't centered in the first slide. But it got me thinking what if the first slide was one third the width of the rest (or some amount). So when the user scrolls he wont notice it.

Sure. Here's the video. In the 4th second the "55 years..." should be counting as the rest of the numbers in other slides (we get the finished counter when we enter the slide). And when the users scrolls back to "55 yeasrs..." it should not be covered right away by the last frame of the bag, only when the user scrolls further up.

Hi. I'm currently developing an animation that uses two section pinned in the same place. The idea is that after the user scrolls and "enters" the trash bag. the last frame should change the opacity and let the horizontal scroll take over (which works almost great). The problem is with the reverse animation as the horizontal scroll hits the first slide. The last frame of the trash bag appears. This project id done on a tight deadline and I'm hoping there's a simple solution for this. A delay maybe? Some spacing between te start of the counter and horizontal scroll?