Share Posted February 3 I have an animation that runs through a list of hsl colors as you scroll over sections. I'd like to be able to define which index the object starts on per section. Also, I took a shot at making the list loop back around to index 0 once you've reached the end of the array. Not sure if this is correct. See the Pen jOpdLKE by dcha (@dcha) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted February 3 Hi, Just use the wrap utility method to go through the arrays length based on the current index, starting with the index of the main section. Something like this: const num = gsap.utils.wrap(0, gradients.length); // The hook for making this reusable sections.forEach((section, i) => { ScrollTrigger.create({ trigger: section, start: "top center", end: "bottom center", toggleActions: "play reverse play reverse", markers: true, id: "section", onToggle: (self) => { console.log(self.isActive); self.isActive ? bar.play() : bar.reverse(); } }); let bar = gsap.timeline({ paused: true }); bar.to(".GradientBar", { translateY: 0 }); let vhsections = section.querySelectorAll(".vh"); vhsections.forEach((section, currentIndex) => { let k = num(currentIndex + i); gsap.to(".GradientBar", { "--stop-one": gradients[k].stopOne, "--stop-two": gradients[k].stopTwo, "--stop-three": gradients[k].stopThree, "--stop-four": gradients[k].stopFour, scrollTrigger: { trigger: section, start: "top center", markers: true, id: "section" + currentIndex, immediateRender: false, toggleActions: "play pause play reverse" } }); }); }); Here you can read more regarding the wrap method: https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() Hopefully this helps. Let us know if you have more questions. Happy Tweening! 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