Multiple Scroll trigger pin in different section

[Louienator]

Hi GSAP pips!

 

I hope you're doing well. I wanted to inquire whether it's possible to implement multiple ScrollTrigger pin animations across different sections of a webpage.

 

Specifically, I'm looking to achieve independent pinning behavior for multiple elements, each within its own section.

 

If this is something you're able to support or provide guidance on, I’d greatly appreciate your insight. Looking forward to your expertise on this.

 

Best regards,

Louie V.

See the Pen azOLwVq by Louie-Miguel-Veloso (@Louie-Miguel-Veloso) on CodePen.

[Rodrigo]

Hi,

 

I'm not sure I follow 100% what you're trying to achieve here, I find your demo a bit hard to follow, that's why is better to add just a few colored divs when creating a minimal demo.

 

Perhaps something like this:

See the Pen azOaooZ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Louienator]

Hi Rodrigo, 

 

1. First ScrollTrigger Section (Vertical Scroll with Step Highlighting)

• When the user scrolls into the first targeted section, the section should become pinned, meaning it stays fixed on the screen while the user continues to scroll.

• During this pinned state, the interface will visually highlight sequential items or steps (e.g., Step 1 through Step 4) based on the scroll progress. As the user scrolls, each step becomes highlighted one after another to indicate progression.

• Once the final step (Step 4) is reached and the user continues scrolling, the section should unpin, allowing the page to return to normal vertical scrolling behavior.

2. Second ScrollTrigger Section (Horizontal Scroll with Opposite Directions)

• When the user scrolls into the second designated section, it should again pin the section in place.

• Instead of vertical motion, this section introduces a horizontal scrolling animation. As the user continues to scroll vertically, it will simulate horizontal movement within the pinned section.

• Two sets of items will scroll in opposite directions to each other (e.g., one set moving top-to-bottom and the other moving bottom-to-top), creating a dynamic contrasting motion.

• When the final item (or post) in this vertical sequence is reached, the section will unpin and the normal vertical scrolling will resume.

[Rodrigo]

I think the issue here could be due to the fact that you're pinning child elements of the sections and not the entire sections. That seems to be creating the problem and since your sections height is 100vh that should work, similar to these demos:

See the Pen xxmpQwP by GreenSock (@GreenSock) on CodePen.

 

See the Pen vYjqXLm by GreenSock (@GreenSock) on CodePen.

 

That would be my approach in this case.

 

Hopefully this helps

Happy Tweening!

[Louienator]

Thank you for this, @Rodrigo. I also wanted to ask—based on the example I shared on CodePen—is there a recommended way to implement my initial ScrollTrigger, particularly one that aligns with the step-based behavior I'm aiming for? This has been a point of frustration for me, especially when managing multiple ScrollTriggers that require different behaviors or animations.

Cheers,

Louie V.

[Rodrigo]

Hi,

 

For complex and/or long animations the best approach would be a single Timeline with the ScrollTrigger config applied to it, but of course every project has it's own peculiarities and challenges, but my initial approach would be a single Timeline. Also normally the best idea is to remove ScrollTrigger from the mix and focus first on the HTML/CSS, then in the animation and finally add ScrollTrigger. I've seen a lot of users get into trouble because they jump right away with ScrollTrigger instead of focusing on the animation. Keep in mind that we have the GS DevTools that helps you in the debugging/development process in order to scrub your animations in a simple and intuitive way:

https://gsap.com/docs/v3/Plugins/GSDevTools

 

Happy Tweening!

[Louienator]

Hi @Rodrigo, i've tested and wrapped them in different timelines, but still i get the same results..
 

See the Pen azOLwVq by Louie-Miguel-Veloso (@Louie-Miguel-Veloso) on CodePen.

[Rodrigo]

Hi,

 

I'm having a hard time understanding what should be happening in your demo and unfortunately I don't have a lot of time to dig into it and try to grasp the concept from your code. I think you are overcomplicating this quite a bit. In the demos on my second post we never pin child elements of a section, always the entire section and use a Timeline in order animate both columns in opposite directions (this seems to be what you're trying to achieve in the second section of your demo):

See the Pen vYjqXLm by GreenSock (@GreenSock) on CodePen.

 

For the first section of your demo maybe these could help:

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

See the Pen pomvabo by GreenSock (@GreenSock) on CodePen.

See the Pen rNbELKO by GreenSock (@GreenSock) on CodePen.

See the Pen xxmPjOv by GreenSock (@GreenSock) on CodePen.

 

As you can see here we also pin the entire section, not child elements of the section.

 

Once again focus just on the animation and then on the ScrollTrigger part of this. Try to create a single Timeline and pin the parent element which makes it far easier and simple in terms of the code and the logic behind it. Pinning child elements always can be tricky and can lead to unexpected results.

 

Hopefully this helps

Happy Tweening!