rusakovsb Posted April 13, 2022 Share Posted April 13, 2022 Hello! I have two blocks with same classes .container. Inside each .container I want to have two animated divs: .box1 and .box2. Animation for .box1 and .box2 must start when parent .container is in viewport. How to use the same trigger for two divs? gsap.utils.toArray(".div1").forEach(box1 => { gsap.to(box1, { ease: "none", transform: "translateY(-5vw)", scrollTrigger: { trigger: container, start: 'top bottom', end: 'top top', scrub: 0.1 } }); }); gsap.utils.toArray(".div2").forEach(box2 => { gsap.to(box2, { ease: "none", transform: "translateY(5vw)", scrollTrigger: { trigger: container, start: 'top bottom', end: 'top top', scrub: 0.1 } }); }); Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 13, 2022 Solution Share Posted April 13, 2022 Hello @rusakovsb and welcome to the forums! You could loop over all your boxes instead and apply different values to properties by using ternary operators/if-else or only if statements e.g. Oh, almost forgot: it is not recommended to tween on your trigger element like this when it will change the dimensions or positioning to where it was initially, so best just wrap what you are going to tween on and use that wrap as the trigger. And you don't need to use transform: "translateY(5vw)" , you can just say y: "5vw" instead . Btw, minimal demos make it easier to visualize things See the Pen BaJOYPM by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
rusakovsb Posted April 13, 2022 Author Share Posted April 13, 2022 1 hour ago, akapowl said: Hello @rusakovsb and welcome to the forums! You could loop over all your boxes instead and apply different values to properties by using ternary operators/if-else or only if statements e.g. Oh, almost forgot: it is not recommended to tween on your trigger element like this when it will change the dimensions or positioning to where it was initially, so best just wrap what you are going to tween on and use that wrap as the trigger. And you don't need to use transform: "translateY(5vw)" , you can just say y: "5vw" instead . Btw, minimal demos make it easier to visualize things Thanks. It helped me find a solution. 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