Issue with pinning same element twice with normal scroll inbetween scrolltriggers

[lucaswinkler]

I'm pretty new to GSAP and I'm trying to figure out this problem I have in the final sections of a site I'm working on. 

The first part of this problem a decent sized section that contains:
- Large horizontal scrolling text that scrolls from right to left on scroll after pinning to the top of the screen.
- A paragraph, then a CTA section with a heading, subheading, button and a large image.

So due to the layout of this section it requires some normal scrolling after the first scrolltrigger.
Then I add in the overlapping section which should trigger at the bottom of the previous one and this is where it all falls apart. 

I keep running into the same 2 problems:

1. They both pin/animate at the same time
2. or one of the pins breaks e.g. horizontal scrolling text pin breaks but animation continues and then once I get to the bottom of the section the next section overlaps like normal.
    

I've done some reading through many posts and from my understanding pinning is a very complex thing and you shouldn't pin the same element twice? I tried a single timeline but I'm struggling to figure all this out.

See the Pen bNwaMpy by lucaswinkler (@lucaswinkler) on CodePen.

[Rodrigo]

Hi @lucaswinkler and welcome to the GSAP Forums!

 

You can absolutely pin the same element twice, no issues there. Perhaps the problem could be in your layout. These demos seem to work as expected:

See the Pen bNwajWK by GreenSock (@GreenSock) on CodePen.

 

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

 

Hopefully this helps.

Happy Tweening!

[lucaswinkler]

Hey @Rodrigo thanks for checking this out. I'm still unable to figure it out though. As soon as I add the second pin that would activate the overlapping section effect then the sections after the "longSection" just disappear or if I add a higher z-index to the overlapping section then it overlaps pretty much as soon as the first pin starts...

So again it should activate the scrolling text at the top of the section which it does. Then scroll through the rest of the section like normal, then once we're at the bottom of this section pin again so that the next sections overlap and it should end that pin once the top of the next section hits the top of the page.

In this example the last 2 sections never show up I'm sort of confused by this. I feel like this implementation should be pretty simple I'm not sure why I cant get it lol

See the Pen bNwLbYg by lucaswinkler (@lucaswinkler) on CodePen.

 

[mvaneijgen]

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

So instead of relying on scroll and pinning you could wrap everything you want for this effect into an animation and just move everything with animations. Below here I've forked your pen and removed ScrollTrigger, I've updated your CSS to have everything stack and then moved them out of the way with tweens. As you can see we can do some really funky stuff with this you can have some section fly in from the right, this would never be possible with a scroll, but with the power of animations the sky is the limit 💪

 

You could add some more logic to this, to check if the current section is larger then the current window and then add a y scroll for that section, you could even dynamically update the the duration of certain tweens so that it really feels like scrolling, but most visitors wouldn't even notice, so it is up to you deep you want to go. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

Hope it helps and happy tweening! 

 

See the Pen bNwLNpJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[lucaswinkler]

@Rodrigo I appreciate this so much it really helped me out here. 

[Rodrigo]

I appreciate it, but I believe that Mitchel (@mvaneijgen) is the one that actually solved this, so I think He should be the one getting the recognition in this case 😉

[lucaswinkler]

22 hours ago, Rodrigo said:

I appreciate it, but I believe that Mitchel (@mvaneijgen) is the one that actually solved this, so I think He should be the one getting the recognition in this case 😉

Oh shoot I just assumed it was you haha. I need to pay attention more. Thanks so much @mvaneijgen!

I'll need to play around with it more. It works, but since I have other sections that use ScrollTrigger for that overlapping effect it brings consistency issues and I'm not a fan of how the animation one feels. I'm assuming most of this can be fixed by tweaking values but I'll have to mess around.

Edit: Got this working pretty well now thanks once again!