ffinger

Hey, I found a solution (or at least it worked so far) calling a function whenever loading a new page to kill all scrolltriggers: function killTriggers() { window.laytheme.on("newpageshown", function () { ScrollTrigger.kill(); }); } Also this topic helped me to understand better (just for anyone else ending up here with a similiar issue and being new to the topic :)) @Rodrigo @mvaneijgen do you think this is good practice? Thanks again for the tips, glad you're here to help!! Cheers Felix

lovely thank you @Rodrigo, I'll look into this!

Oh okay I see. I'm working in a Wordpress theme which is apparently running with backbone.js framework, not sure how to re-create this on stackblitz though. Not sure if this helps but this is the current live version: Test environment I understand if you can't help on this since it's very specific...I didn't think of this becoming such a rabbit holeI really love the animations you helped me with so far, but otherwise I'm trying to find an entire different approach to this. Have a great evening Felix

@mvaneijgen thanks so much for the additional infos What other issue I stumbled across now is that I would like to implement this into a page that is loading content dynamically via ajax. When I load the page at first everything works fine, but when I come back to the page from another one it seems like the triggers don't work and everything is visible from the beginning and the animations start flickering at the beginning. I tried to have the timeline killed with tl.kill() or tl.scrollTrigger.refresh(0), but then somehow images start to disappear. Apparently I'm doing something wrong and having trouble killing/refreshing the trigger/timeline correctly before the page loads. Do you have a tip how to do this properly? Maybe this is very obvious but I haven't done this before and don't get this cracking Many thanks in advance! Cheers Felix

@mvaneijgen ok wow this is exactly what I was aiming for!! Pretty cool, thank you a ton. I only do not completely understand what you did there. In the timeline your saying tl.from(q(".class"). So this is like a nested selector? I've not seen this before. And how is the "-=50%" overlapping by 0.25 seconds? I would assume 50% by 4 seconds would overlap by 2 seconds? Again thank you for the time, this helps a lot!! This forum is so awesome Best, Felix

Hey @mvaneijgen Thank you for the quick answer!! Your idea works but a bit different than I'd like to have it. I thought about doing it in a timeline as well. But the effect I'm aiming for is: The two elements (image and box) shall fade in at different times. First the box and at a specific position the image afterwards. They are supposed to fade out at the same time then. With a timeline now I can not really control the exact position, when the image fades in. Also with a timeline it gets a bit difficult to control for how long the two elements stay visible? Now they appear one after another and then instantly dissappear again instead of fading out later with a scrolltrigger. Do you have an idea how this could work? The .batch() looks also like this is gonna be hard to controll the position the seperate fade-in and -outs. Cheers and thank you already:) Felix

Hey, I try to animate different elements with different triggers (simply fade in and fade out). I read the document and most common mistakes and tried to use the array approach (two different arrays for each kind of element). In general it works like expected but when I scroll fast, the fade out animation would be stuck. I'm not sure what else to try and where my logic mistake is. Maybe someone can help out, would be very grateful! I built a codepen and here's a video showing what I mean with the stuck fade out animation: https://www.dropbox.com/scl/fi/a7c4say4esivt6c5zurdp/sc2.mp4?rlkey=ggrdgyflgbue58enpd6732skr&dl=0 Best, Felix

Hi @Rodrigo you're a life saver! It was not exactly what you mentioned, but you got me on the right track! The theme creates the DOM for desktop even when being on mobile and GSAP fired the scrolltrigger in the desktop container on mobile, which obviously caused a mess. Now I just applied the animation to a unique container on mobile and it works like a charm! Thanks a ton for the quick help and keep up the great work with GSAP ?

Hello GSAP people, I'm working with gsap the first time and not having a lot of JS experience, so I hope I can find some help here. Thanks for creating GSAP in the first place, really fun to experiment with it I hooked a SVG animation to ScrollTrigger and it works as expected on desktop: https://wordpress.flosse.works/start/ But as soon as I switch to mobile it behaves very strange (IOS 16.5, Safari and chrome tested), see video attached. I created a demo, but it's basically just the helper function provided in the docs (I used the json file from the original demo, because I can't upload one). I work on wordpress page builder theme (LayTheme), which is loading the content dynamically via ajax. Any idea what could cause this? Help would be appreciated Cheers! Felix Bildschirmaufnahme 2023-06-14 um 16.49.41.mov