icekomo Posted August 3, 2020 Share Posted August 3, 2020 I'm new to ScrollTrigger but I would assume that I am doing this the long way. I actually want 3 different DOM elements to trigger the same timeline animation. The way I am currently doing that is working, I just think there has to be a better / cleaner way. ScrollTrigger.create({ animation: headerColorChange, trigger: "#index-intro", toggleActions: "restart reverse restart reverse", markers: true, //id: "index-intro", start: "top 74", end: "bottom 74" }); ScrollTrigger.create({ animation: headerColorChange, trigger: "#index-brands-container", toggleActions: "restart reverse restart reverse", markers: true, //id: "index-brands-container", start: "top 74", end: "bottom 74" }); ScrollTrigger.create({ animation: headerColorChange, trigger: "#index-weather", toggleActions: "restart reverse restart reverse", markers: true, // id: "index-weather", start: "top 74", end: "bottom 74" }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 3, 2020 Share Posted August 3, 2020 That's a very unusual request. But to me it looks like you're doing things correctly Having multiple ScrollTriggers is not an issue. If you wanted to make your code more DRY you could use Object.assign() 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2020 Share Posted August 3, 2020 Here's one other option: gsap.utils.toArray("#index-intro, #index-brands-container, #index-weather").forEach(element => { ScrollTrigger.create({ animation: headerColorChange, trigger: element, toggleActions: "restart reverse restart reverse", markers: true, start: "top 74", end: "bottom 74" }); }); 2 1 Link to comment Share on other sites More sharing options...
icekomo Posted August 3, 2020 Author Share Posted August 3, 2020 @Jack That is exactly what I was looking for, just wasn't sure how to write it. Thank you so much! 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 3, 2020 Share Posted August 3, 2020 Not using loops is one of the most common GSAP mistakes. Read about all of them here: 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