scrolltrigger multiple pinned element

[benoit958]

Hello,

 

I'm having trouble using scrolltrigger multiple pinned sections.

I'd like to have multiple pinned sections where a carousel is “activated” once user’s scroll reached the center of the element.

 

As it's important that rest of the content stays visible when a section is pinned, I'm using the “main” element as pin value.

My problem is that the start position of the second section is messed up by the previous one. Hope it's clear..

 

It's certainly not the right method so if someone could help understand how to approach I'd be grateful

 

See the Pen dywpqZo by benoitbohnke (@benoitbohnke) on CodePen

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen

 

In this cases the best approach is to wrap everything in the same parent, pin that element and use the previous method in order to get the previous ScrollTrigger instance's end point.

 

Hopefully this helps.

Happy Tweening!

[benoit958]

Thanks Rodrigo,

 

It definitly helps but I'm still confused on how I should calculate that start position.

In my case I have other regular sections in between and I want different animation to happen for each section.

I thought I could simply add section.offsetTop to self.previous().end but it only works for the second section (after hero in my example). I expected the animation to start when third section reaches the top of the window too.

 

 

[Rodrigo]

Hi,

 

Every scenario is different and that's why adding ID and indent the markers is always a good idea.

 

In this case the challenge was to determinate when the top of each element will get to the top of the viewport. By default without any pinning ScrollTrigger will calculate that scroll amount based on the position of each element. Since you are pinning the parent of every element, you have to add that scroll amount to your start point:

let accumulatedOffset = 0;

gsap.to(hero, {
  scale: 0.9,
  duration: 2,
  scrollTrigger: {
    trigger: hero,
    start: "top top", // or 'top 25%'
    end: "+=300",
    pin: parent,
    markers: true,
    scrub: 1
  }
});
// Add the pin space from the previous
// ScrollTrigger instance
accumulatedOffset += 300;

gsap.to(cards1, {
  scrollLeft: 1000,
  scrollTrigger: {
    trigger: cardsCtn1,
    start: "top+=" + accumulatedOffset + " top",
    end: "+=500",
    pin: parent,
    markers: { indent: 150 },
    id: "one",
    scrub: 1
  }
});

// Add the pin space from the previous
// ScrollTrigger instance
accumulatedOffset += 500;

gsap.to(cards2, {
  scrollLeft: 1000,
  scrollTrigger: {
    trigger: cardsCtn2,
    start: "top+=" + accumulatedOffset + " top",
    end: "+=500",
    pin: parent,
    markers: { indent: 350 },
    id: "two",
    scrub: 1
  }
});

That seems to work the way you intend:

See the Pen eYbBXbR by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[benoit958]

Perfect, thanks a lot !