ScrollTrigger with horizontal cards scroll

[Roman-gsap]

Hello

I am trying to make this effect.

Mobile view 400px wide. I have slider with 3 blocks and I have content blocks before and after slider. Slider should scroll horizontally.  I modeled this case here  . I use 3 elements here and maybe  i overcomplicate things and there is easy way to do this ?. 

See the Pen xbweadJ by goracio (@goracio) on CodePen.

[mvaneijgen]

Are you looking for a way to pin everything while the animation is playing horizontally? I would then wrap everything you want to pin, in this case .test-page-wrapper and use that as your pinned element. 

 

Hope it helps and happy tweening! 

 

See the Pen pvjBqdP?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[Roman-gsap]

thanks - yea that is easier, i made 2 blocks finally with scrollTrigger. 

If i need to stack cards over each other, how i can add this effect ? i guess this would be not that easy )

• mvaneijge

[mvaneijgen]

Everything in GSAP starts with an animation, so first focus on the animation you want to happen then add that to ScrollTrigger to see how it works on scroll. I've written a guide all about this check 

 

 

Hope it helps and happy tweening!