Share Posted May 3, 2022 Hi, I'm trying to declare a simple tween with a scrollTrigger attached to it (like the one below for instance), but I want to control the moment this tween and its scrolltrigger are fired. let tween = gsap.from('.text', { opacity: 0, duration: 2, scrollTrigger: { trigger: '.text', } }); In other words, I just want to declare it, I don't want to play it right away! Then, I want to be able to manually activate the scrollTrigger later on, and play the tween accordingly (if the element is in the viewport, the tween should play, else it should wait). I've tried different combination of tween.scrollTrigger.disable(), tween.pause(), and also tried using the ScrollTrigger.create() approach but nothing seems to work! Is that even possible? 🤔 Many thanks! 🙏 See the Pen gOvbBmL by Thibka (@Thibka) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted May 3, 2022 tween.pause().scrollTrigger.disable(); seems to work fine for me. Happy tweening. 3 Link to comment Share on other sites More sharing options...
Share Posted May 3, 2022 2 hours ago, Thibka said: In other words, I just want to declare it, I don't want to play it right away! Just curious - why are you trying to declare it before you ever need it? Why not just create it when it's needed and not have to mess with disabling/pausing it? Link to comment Share on other sites More sharing options...
Author Share Posted May 3, 2022 Thanks @PointC it does work! And now I'm wondering how I didn't manage to get it working on my own! 🥲 @GreenSock In this case I need my target element to be hidden for a while. And since I'm using a gsap.from tween to go from hidden to visible, I need to declare the tween asap. The alternative would be to manually hide the element first (using gsap.set, vanilla js, or css), and then use a gsap.to when I'm ready, but I find this 2-step approach less clear/elegant. 🙂 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now