Pinning and overlapping sections in ScrollTrigger horizontal scroll

[keetwood]

Hi GSAP community,

 

I'm currently working on a project where I need to create a horizontal scroll section that can be reused multiple times on the same webpage. I'm using GSAP ScrollTrigger for the horizontal scroll and container animations, but I'm facing some challenges with putting it all together, and the pinning / overlapping of sections.

 

In this CodePen, you can see that I have a horizontal scroll with several sections. Each section has its own content and animations. What I'm trying to achieve is to pin the second slide and make the following sections overlap it, creating a parallax effect. I've tried adjusting the positioning and using different ScrollTrigger settings, but haven't been successful so far.
 

I have read countless forum posts on this related topic, and have implemented a lot of your advice to get this far. I would greatly appreciate it if someone could provide guidance or suggestions on how to achieve the desired effect of pinning the second section and having the subsequent sections overlap it during horizontal scrolling.

 

RECAP:

• Please help with applying container animations to sections within horizontal scroll
• Please help with pinning a particular section within horizontal scroll - to allow overlap of following section
• Please help with applying this multiple times on a single webpage
   

Any help or insights would be highly appreciated. Thank you in advance for your time and assistance!

 

Best,

 

Keaton

See the Pen ExdpWBG by keaton-lockwood (@keaton-lockwood) on CodePen

[keetwood]

Here's a good reference for what I'm trying to achieve for the pinning within horizontal pin.

I'm just not sure how to apply it to my current codepen situation. 

 

[Rodrigo]

Hi Keaton,

 

Horizontal pinning, as you might already found out, is not something that comes out of the box in ScrollTrigger for a few reasons that I won't go into detail here.

 

Container animation also can't accommodate inning as well.

 

What you already have in place seems to be quite closer to what you're trying to do. Using a timeline to move the slides or the horizontal container, add instances in the timeline to move other things and the continue moving the horizontal container.

 

If you want to achieve what @akapowl had in this particular example:

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

 

It might come down to CSS mostly. The brilliance in Paul's example is here:

gsap.set('.red', { zIndex: 999 })

const fakePin = gsap.to('.red h1', { x:  window.innerWidth * (sections.length - 2), ease: 'none' })

ScrollTrigger.create({  
  trigger: ".red",
  containerAnimation: scrollTween,
  start: 'left left',
  end: "+=" + window.innerWidth * (sections.length - 2),
  scrub: true,
  animation: fakePin,
})

First He gives the red section (that has the h1 inside) a super high z-index so it's above all the other sections. Then every panel has a relative position and the h1 that is "pinned" has an absolute position. Since it parent has a position as well, the absolute position is based on it's parent and not the document. Then the fakePin animation just animates the h1 to the right/left as you scroll down/up. You can see that the amount for x in the fakePin animation is the same as the end point in the ScrollTrigger instance.

 

I strongly recommend you to play with Paul's example, study it and try to start with your own version in the simplest possible way. Don't run a bunch of loops for a bunch of sections. Just start with one and once you have a bullet proof animation that works the way you intend, take it from there and use it in more sections.

 

We can help you solving simple issues, but use simpler and smaller examples than the one you have right now, and then you can take it up one step at a time.

 

Hopefully this helps.

Happy Tweening!

[keetwood]

Thank you, @Rodrigo !