Pinned Section Inside Pinned Section

[Matthew Meaklim]

Hello,

 

I have created a series of pinned sections using ScrollTrigger as shown here . As you can also see, I then tried to create a further pinned section inside section four - as you scroll to each piece of the text on the left, update the image on the right. However, although it seems to work okay on first scroll, when you get to the end it kinda freaks out and I am unsure why.

 

Perhaps I'm overcomplicating things, so open to any suggestions on alternative ways to achieve the desired effect.

 

As always, any help appreciated.

P.S. I've the Lenis Scroll method commented out in case you're wondering what that code is up to.

 

Thanks,

 

Matthew

See the Pen qBQyeeN by ilimitadostudio (@ilimitadostudio) on CodePen

[Cassie]

Hi Matthew!

 

You're nesting ScrollTriggers here which is a common mistake

You can add scrollTriggers into timelines or tweens, but you can't add then to a timeline AND a tween in that timeline.
You'll end up with conflicting logic. Tweens within a timeline are controlled by their position on the timeline and the timeline's playhead position. You can't tie the timeline itself to scroll and then also try to control a child tween independently with a different scroll relationship. Which one is the tween meant to listen to, the timeline's ScrollTrigger or it's own ScrollTrigger? They'll be fighting over control.
 

 let sectionFour = gsap.timeline({
        scrollTrigger: {
          trigger: '.section.four',
          start: 'top bottom',
          end: 'top top',
          markers: true,
          id: "inner"
        }
      });

      sectionFour.fromTo('.section.four .imgs', {
        autoAlpha: 1,
      }, {
        autoAlpha: 1,
        duration: .3,
        ease: 'Power4.easeInOut',
        scrollTrigger: {
          trigger: '.section.four .imgs',
          start: "top 120px",
          end: end + 'px',
          pin: true
        }
      });

Nested pinning is also not supported. So you'll have to rethink a little.
I'm not 100% on what your goal is but my advice would be to position the inner children of section 4 absolutely and then use a timeline to animate between them?

Maybe something like this is a good starting point?

See the Pen yLQxOOd?editors=0010 by GreenSock (@GreenSock) on CodePen

[Matthew Meaklim]

"Nested pinning is also not supported" - bingo, I had thought this.

 

Seems I've got it doing what I want now - .

 

Thanks for the pointers as always!