Mark Bain Posted October 29, 2021 Share Posted October 29, 2021 (edited) Hello! My goal is to have multiple gallery sections containing multiple columns that scroll at different speeds (using ScrollTrigger). To achieve the multiple sections, I'm using a forEach loop for each section as per See the Pen QWNqBvL by GreenSock (@GreenSock) on CodePen , and also looping through the columns within each section. I'm seeing 2 issues with my current implementation: Despite the loop, the animations are triggering at the same time (when the Section 1 reaches the trigger). Each section should be triggering its own animations. I'm seeing the columns in Sections 2 and 3 suddenly reposition when the scroll ends. This isn't happening when on Section 1. Any help would be appreciated. Many thanks! See the Pen rNzzjNM by markbain (@markbain) on CodePen Edited October 29, 2021 by Mark Bain Add tags Link to comment Share on other sites More sharing options...
Solution akapowl Posted October 29, 2021 Solution Share Posted October 29, 2021 Hey @Mark Bain Even when you're using gsap.utils.toArray(".gallery__group") inside that forEach loop it will still create an array of all the elements with that class in the document. If you only want to target the elements with said class inside that one specific gallery, try gallery.querySelectorAll(".gallery__group") instead // change this const groups = gsap.utils.toArray(".gallery__group"); // to this const groups = gallery.querySelectorAll(".gallery__group"); Edit: or if you want to leverage GSAP's superpowers all the way, you could also use the .selector() utility-method in the forEach-loop - something like this: const q = gsap.utils.selector(gallery); const groups = q(".gallery__group"); See the Pen 69ffe12c3a8b5c6cb27038704801f946 by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Mark Bain Posted November 2, 2021 Author Share Posted November 2, 2021 Thanks, @akapowel! 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