Jump to content
Search Community

ScrollTrigger animations in nested loops triggering at same time

Mark Bain test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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:

 

  1. 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.
  2. 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 by Mark Bain
Add tags
Link to comment
Share on other sites

  • Solution

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

 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...