Rodrigo

Great to hear about it! Yeah sometimes we have to hack our way into something working the way we need 🤷‍♂️ Happy Tweening!

Ahh yeah I see the problem now. Roughly this is your HTML <div class="scroll-through-hero st-hero-animate sth-fadein-off" style="background-color: inherit;"></div> <div class="immersive-scroll-video" style="background-color: inherit;"></div> <div class="immersive-scroll-video" style="background-color: inherit;"></div> <div class="scroll-through-hero st-hero-animate sth-fadein-off" style="background-color: inherit;"></div> In your JS you're creating the ScrollTrigger instances for the elements inside the immersive-scroll-video elements and then for the scroll-through-hero elements. When using ScrollTrigger ideally create the instances in the order they appear on the screen as the user scrolls down, especially if you are pinning one or more ScrollTrigger instances. If you can't create your instances in the order they appear in the screen, then you can use the refreshPriority config option. From the ScrollTrigger docs: refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers. Here is the docs for the sort method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort() Hopefully this helps. Happy Tweening!

Hi, I'm not 100% sure of what issue you're experiencing, but waiting for 1 tick of GSAP's ticker should be enough. As far as I can tell, after you revert your GSAP instances and create the new ones, it should take 1 tick to render the new ones, so that should be enough. Based on your demo this is how I would proceed: const tweenable = document.getElementById('tweenable') let tween, timer; const createTween = () => { tween = gsap.timeline().fromTo(tweenable, {opacity: 1}, {opacity: 0, duration: 1}); }; const revertTween = () => { tween && tween.revert(); createTween(); }; window.addEventListener("resize", () => { timer && clearTimeout(timer); timer = setTimeout(() => { revertTween(); }, 200); }); createTween(); Here is a fork of your demo: https://codepen.io/GreenSock/pen/oNOVzdg Hopefully this helps. Happy Tweening!

Hi @knozz and welcome to the GSAP Forums! Maybe something like this demo: https://codepen.io/GreenSock/pen/vYjqXLm Hopefully this helps. Happy Tweening!

That's because the first ScrollTrigger instance is passed the end marker and the second one is passed the start marker, makes total sense: You have to take a look at the clamp feature in ScrollTrigger: Yep I'm aware of what custom hooks do in React, I wrote parts of our useGSAP hook. Hopefully this helps. Happy Tweening!

Hi, Sorry but I can't get 100% what you're trying to achieve here. Do you want to pin the elements in one column in sequence like this demo? https://codepen.io/GreenSock/pen/eYQYxJW If possible try to make a clear description of what should happen and include a live demo that has said feature so we can get the desired effect you're after. Happy Tweening!

Yeah, this seems more like a browser rendering thing rather than anything else, sometimes some combination of negative margins and padding can help, maybe you could try something like that and see if it works. I wish we had a simple one line solution for this. Happy Tweening!

Hi, You could try clearing the inline styles applied by GSAP using clearProps on an onComplete callback: gsap.timeline({ repeat: 1, yoyo: true, onComplete: () => gsap.set(element, { clearProps: "scale" }), }) .to(element, { scale: 1.1, duration: 1, }); Another option could be to try using will-change: transform on those images and see how that works. Hopefully this helps, if you keep having issues, please try to create a minimal demo so we can have a better look. Happy Tweening!

Hi @kosmo, Sorry to hear about the issues. Can you provide a minimal demo by forking this codepen: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!

Hi, There are a few issues in your demo. First you're creating a single timeline for all the buttons, that is not going to work the way you intend, create the GSAP Tween/Timeline, inside the loop so each button controls it's own animation. Second, you have the same mask name for all the elements, which means that when one mask is animated it affects all the elements with that mask ID, create a different mask ID for each element. Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNbRxrP Hopefully this helps. Happy Tweening!

Hi, The specific issue here stems from the fact that you're using the GSAP Trial package. The short explanation is that the useGSAP hook uses the regular GSAP import, like this: import gsap from "gsap"; But the rest of your app is using the GSAP core files from the gsap-trial package which is a completely different object (the code is basically the same but it comes from different files, hence a different object), so the scope is not being used because is added to a different GSAP core object. The solution is to register the useGSAP hook using the import from the gsap-trial package so it uses the same GSAP core than the rest of the plugins: gsap.registerPlugin(ScrollTrigger, useGSAP); That should fix the problem. Happy Tweening!

Hi @stectix, Sorry to hear about the troubles. Based on your latest posts I assume that you're trying to deploy a Next app on Vercel using Yarn? Correct me if I'm wrong about this assumption. I created a new Next app using Yarn and successfully installed the bonus package. Here is the repo: https://github.com/rhernandog/next-gsap-bonus-yarn-vercel Here is the live preview on Vercel (you can inspect the console in devtools to check the version of a bonus plugin): https://next-gsap-bonus-yarn-vercel.vercel.app/ I installed using the shockingly package since the plugins are the same: yarn add gsap@npm:@gsap/shockingly Is important in this case to install the @gsap/react package before installing the bonus plugins to avoid any issues with Yarn/NPM asking for the token as well. Hopefully this helps. Happy Tweening!

Hi, Honestly IDK what can be done since normally when you swipe on a touch device the momentum scroll will trigger. During that any touch input will immediately stop the momentum scroll. This is how browsers work mostly. On that note what type of touch event should not be considered an autoKill event? How can that be achieved? Right of the top of my head I can't think of a way to achieve this. Sorry I can't be of more assistance 🫤 Happy Tweening!

Not at all, just don't include the page flipping on that conditional block because that has to happen no matter what, right? Always create the page flipping animation and depending on the conditional block create the rest animations. Happy Tweening!

Hi, Well I couldn't resist to create a simple demo of this, super fun!: https://codepen.io/GreenSock/pen/BaEMOrd The magic numbers you see there are because: The width of the wrapper is 80% the screen width. The wrapper for the box has a 10 px padding on the left/right The box element has a fixed width of 75px Hopefully this helps. Happy Tweening!