Garavani Posted May 10, 2023 Share Posted May 10, 2023 With the following code I’d like to achieve that an animation starts at a certain point of scroll triggered animation. As it is pinned I think I can not use the start and endpoints, I guess. It works with the code below, but I am wondering if this is the correct way to do that. And also I suspect that the animation will be played again and again while the progress is greater than 0.5 (the middle) on each update. Is there a better way to achieve the same thing with the scrollTrigger methods? Thank you in advance! gsap.registerPlugin(ScrollTrigger); const lightsOn = gsap.to(".lights", { opacity: 1, duration: .315, ease: "sine.Out(2)", paused: true }); gsap.to("#image-1 .background", { scale: 0.2, scrollTrigger: { trigger: "#image-1", start: "top", end: "bottom", pin: true, scrub: 1, onUpdate: self => { if (self.progress > 0.5) { lightsOn.play() } else { lightsOn.reverse() } } } }); EDIT: Or maybe it would be more appropriate to use an intersection observer for this kind of task? Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted May 10, 2023 Solution Share Posted May 10, 2023 Hi @Garavani and welcome to the GreenSock forums! Running some custom logic, even a small and simple one as you have in your snippet, it's always a bit expensive and wasteful in the long run. In this case I'd recommend you to create a timeline instead of a tween and add a call method half way through that, something like this: See the Pen eYPrWVN by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
Garavani Posted May 11, 2023 Author Share Posted May 11, 2023 Thanks so much, Rodrigo! Tested it and it seems to be a really good starting point for the things I need to do! Best regards, Stefan 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