ScrollSmoother and Pinning elements

[Lee Probert]

Is it possible to use a `ScrollSmoother` and still pin elements like you would with a `ScrollTrigger` ... I have had to create individual `ScrollTrigger` instances for each of my section elements:

 

sections.forEach((section, index) => {
            ScrollTrigger.create({
                trigger: section,
                start: 'center center',
                end: `+=${PIN_DURATION}`,
                pin: true,
                pinSpacing: true,
                markers: false, // Set to true to see pin markers
                onEnter: () => {
                    console.log(`Section ${index + 1} entered - pinned`);
                },
                onLeave: () => {
                    console.log(`Section ${index + 1} left - unpinned`);
                },
            });
        });

 

Can you not use the one `ScrollTrigger` instance that is available in the `ScrollSmoother`?

See the Pen VYjmRBO by leeprobert (@leeprobert) on CodePen.

[Rodrigo]

Absolutely! In fact it seems to be working as expected in your demo, isn't it? The ScrollTrigger instance inside a ScrollSmoother one is only for ScrollSmoother, nothing more. In order to create other ScrollTrigger instances just use the create method or use the configuration available in Tweens and Timelines:

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.create()

 

// Tween
gsap.to(target, {
  // ...
  scrollTrigger: {
    // ...
  }
});

// Timeline
const tl = gsap.timeline({
  scrollTrigger: {
    // ...
  }
});

 

Hopefully this clear things up

Happy Tweening!

[Lee Probert]

So this is the most efficient way to do it? Create a ScrollTrigger for every element I want to pin?

[Rodrigo]

Yeah, you can use ScrollTrigger batch also:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

99.9% of the times you'll see a performance issue using GSAP based only on code, normally performance problems stem from browser rendering and not JS execution. Are you encountering performance problems in your app or just a general question regarding best practices?

 

Happy Tweening!