Horizontal scroll with sticky section

[Akash Ranjan]

Hi,

 

I am building a website with horizontal scroll. I have a requirement to stick one section and scroll to bottom which has content more than the viewport height (Grey section in the example codepen).

 

I tried a few ways but it is not working as expected. Please help me.

 

Thank you

See the Pen eYQrJLZ by akashrwx (@akashrwx) on CodePen

[mvaneijgen]

1 hour ago, Akash Ranjan said:

I tried a few ways but it is not working as expected. Please help me.

We love seeing what you've already tried, that is what Codepen is great for! Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

Keep in mind that ScrollTrigger is just animating something on scroll, so first focus on the animation, before you start thinking about ScrollTrigger.  

 

I've placed some comments in your pen to better explain certain things, but what I've did is changed your one tween to three separate tweens that all do what you want. First the two panels get moved to the right (the same as your initial tween), then the grey panel gets moved 100% of it's height to the top (you should subtract the window height from this value or you could also move the purple boxes instead) and then the last panel gets moved. Again, ScrollTrigger is just animating a sequence of animations (timeline) on scroll, so that is the only thing you need to worry about when working with ScrollTrigger. Hope it helps and happy tweening! 

 

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

[Akash Ranjan]

Hey @mvaneijgen,

 

Thanks a lot for the reply. Sorry I was unable to provide forked codepen as I was experimenting in my VScode only. I created this simple demo just for this forum.

 

I tried the above solution but there are many animations inside those sections which animate as i scroll. I used containerAnimation for that but after implementing this solution the animations have stopped working

 gsap.to('.v-text-1', {
      yPercent: -50,
      duration: 2,
      ease: 'linear',
      scrollTrigger: {
        trigger: '.vertical-text-wrapper',
        containerAnimation: scrollTween,
        start: '60% 100%',
        end: '140% 0%',
        markers: true,
        scrub: 0.5,
        id: '1',
      },
    })

Can you please help me with this

 

See the Pen bGQMwaz by akashrwx (@akashrwx) on CodePen

[mvaneijgen]

2 minutes ago, Akash Ranjan said:

Sorry I was unable to provide forked codepen as I was experimenting in my VScode only

I really recommend using Codepen to test out new ideas. It's more work, but it really allows you to experiment and fall back if things brake, again when I'm developing something I keep forking my work until I'm happy with the result and at the earliest that is at version 10.

 

Why not also add them to the timeline where you want them to happen? I've found that you rarely need more than one ScrollTrigger to get the desired effect. 

[Akash Ranjan]

I tried to add it to the timeline but i want the animation to go on as the previous animation is running. For example when the first 2 slides are moving i want the box in the second slide to move to with them. But in my case it is working after the panel animation is completed

[mvaneijgen]

Please share minimal demo of what you've tried ✨ A demo speaks 1000 words ✨

 

It sounds like you're looking for the position parameter?

[Akash Ranjan]

Hey,

 

This is what I tried.

 

See the Pen wvQjoYG by akashrwx (@akashrwx) on CodePen

 

I am using multiple scroll trigger to have a more precise control on start and end points as I have many animations between the panels

[mvaneijgen]

Let's keep it simple. Remove ScrollTrigger from the equation! 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. 

 

So you want a panel to move, move it. Then do something else move the box down and rotate it, then move the panel again. Than move he current panel vertically and do something with its boxes, and move to the next panel. The animation is key here, if that is not correct it will never be correct on scroll. 

 

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

[Akash Ranjan]

Yes I understand that the animation is key but the problem I am facing is that I don't want all the panels to stick while their inner animations are playing. I want a smooth horizontal scroll with stops only at panels which I want.

 

Currently the entire panel 2 sticks while the inner content animations are playing.

 

At the start I took refernce from this codepen provided by @Cassie in another post.

 

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

 

 

 

[Rodrigo]

Hi,

 

Pinning or sticky elements are not supported out of the box when working with horizontal setups or the Container Animation feature for logical reasons.

 

Mitchel already has gone above and beyond in providing a lot of answers and his last post actually shows you exactly what the procedure is, which is creating a timeline that creates the horizontal animation and stops the panels when you want to play other animations inside those panels, which is exactly the title of the thread you created:
Horizontal scroll with sticky section

That basically tells us that you want the panels to stop at certain points in  order to do something else. If not then your thread title is misleading and as you pointed in the last example you linked (created by Cassie) you are looking for the Container Animation feature. Now if you want to stop the panels and use the Container Animation feature, that's not possible, you have to take the approach Mitchel already provided in this example:

See the Pen yLQjgeK by mvaneijgen (@mvaneijgen) on CodePen

 

Here is something similar with ScrollTrigger:

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

 

Hopefully this helps.

Happy Tweening!

[Akash Ranjan]

Hi @Rodrigo,

 

This is exactly what i was looking for. Thanks alot for this. The only problem is what if I need multiple stops?

[Rodrigo]

Hi,

 

You just have to create the stops, soto speak, in the animation that moves the elements horizontally in order to animate the elements inside those particular sections when they are visible.

 

Here are a couple of examples:

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

 

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

 

Hopefully this helps.

Happy Tweening!