Nested gsap.utils.toArray selector not working as expected

[velkas 7 Likes (Newbie)]

As you can see in the demo, I have duplicated sections with the same content structure and selectors. I'm attempting to use gsap.utils.toArray so I can iterate over the animated text but it seems to only be grabbing the first of each instance instead of three instances per section. Any ideas?

See the Pen zYjXGQb by connorhansen (@connorhansen) on CodePen

[velkas 7 Likes (Newbie)]

I think the solution is to replace var scrollHeadings = gsap.utils.toArray(".animated-text", section); with var scrollHeadings = section.querySelectorAll(".animated-text");

[velkas 7 Likes (Newbie)]

This is closer to what I'm trying to achieve but I'd like to chain the text animations while the parent section is pinned. In other words, I'd like to scroll through all animated text items before unpinning the parent section and scrolling to the next section. 

See the Pen gOzyawx?editors=1010 by connorhansen (@connorhansen) on CodePen

[GreenSock 18,249 Likes (Superhero)]

You were just using a very old version of GSAP, before .toArray() accepted a "scope" parameter. Update to 3.11.3 and you'll be fine

 

I'm not sure exactly what effect you're going for, but here's a quick guess: 

See the Pen qBYwOpN?editors=1010 by GreenSock (@GreenSock) on CodePen

[velkas 7 Likes (Newbie)]

Ahh thanks!! That's much closer to what I'm trying to achieve. I took it a step further but the alignment isn't ideal... should I use absolute positioning for the animated text so they are on top of each other? Ideally the text also snaps to prevent overscrolling.

See the Pen bGMJVYK?editors=1010 by connorhansen (@connorhansen) on CodePen

[GreenSock 18,249 Likes (Superhero)]

Yep, definitely use absolute positioning to get your text in the correct spot. As for snapping, you'd need to calculate the math to find the right progress values where the text has "landed" (the snapping positions). You could feed an Array of those values into the snap property. 

[velkas 7 Likes (Newbie)]

Ok thanks I'll see what I can come up with. Here's the pen with absolute positioning: 

See the Pen bGMJVYK by connorhansen (@connorhansen) on CodePen