Using .pin-spacer as the trigger of another ScrollTrigger instance

[Théophile Avoyne]

Hi guys,

 

I built an animated carousel using ScrollTrigger. The ScrollTrigger instance that controls the overall animation uses pin: true and scrub: true. It is attached to a timeline that takes care of translating the images on the y-axis and scaling them based on their position.

 

I needed to add a tween to each of the images to control their opacity based on their position. Because I don't want to have the scrub feature activated for these animations (otherwise I would have inserted them into the main timeline), I attached a new ScrollTrigger instance to each of them. Here's what it looks like:

 

images.forEach((image, index) => {
  gsap.fromTo(
    image,
    { opacity: 0.2 },
    {
      duration: 0.2,
      ease: 'none',
      opacity: 1,
      scrollTrigger: {
        end: `${index * 20}%+=1 top`,
        start: `${index * 20 - 20}% top`,
        toggleActions: 'play reverse play reverse',
        trigger: '.pin-spacer',
    },
  });
});

 

But, because the main ScrollTrigger instance uses pin: true, you'll notice that I had to use .pin-spacer as the trigger of these ScrollTrigger instances.

 

It works exactly as expected but it feels a bit odd to me. My question is, is this good practice? Should a ScrollTrigger instance rely on another one in such configuration? If not, what do you recommend me doing?

 

See the Pen vYyaENg by theophileavoyne (@theophileavoyne) on CodePen

[akapowl]

 

🤔 Although it looks a bit different, I guess this is a simliar situation to what was  described in this thread.

 

 

 

 

To me it looks like technically you could use the pin-spacer as the trigger because it is wrapping the container you are pinning - but if you had multiple instances of pinned scrollTriggers you'd have to make sure to address the correct pin-spacer for it to work.

 

What you could also do as described in the thread I linked to, is to just wrap your #container and use that wrap as the trigger instead.

 

See the Pen b30316c0fe57f12f66e5ae40f6d3ef40 by akapowl (@akapowl) on CodePen

 

 

[Théophile Avoyne]

On 3/5/2021 at 1:02 PM, akapowl said:

🤔 Although it looks a bit different, I guess this is a simliar situation to what was  described in this thread.

 

Thanks @akapowl, that helped!

 

On 3/5/2021 at 1:02 PM, akapowl said:

What you could also do as described in the thread I linked to, is to just wrap your #container and use that wrap as the trigger instead.

 

You're right!