ScrollTrigger: Responsive Pin with Horizontal Scroll (GSAP)

See how to solve one of the most common scrolling animation challenges:
Allowing a pinned element to scroll horizontally just until all of it has been in view. This solution leans on function-based values and invalidateOnRefresh. Create responsive, scroll-driven animations without media queries!

This video is just a quick overview. To gain a detailed understanding check out my complete ScrollTrigger course at

Joining Creative Coding Club is THE BEST WAY to support the channel and unlock ALL my GSAP training

When you join Creative Coding Club you get over 200 GSAP tutorials to teach you GSAP basics, pro techniques, ScrollTrigger, SVG animation and so much more.

New lessons added each week!

Start as low as $2.95 per month.

Demo

Be sure to like, comment and subscribe today!

[tjk_]

thank you! this is my first week learning javascript and I was able to use your tutorial to build a CMS based testimonial block that scrolls horizontally no matter how many cards you add in the CMS. these functions are definitely needed if I want to make this client friendly. cheers!

[izacaqsha]

Thank you!! Keep up the good work sir 👍🏽

[moonsun]

this video is so informative and taught me a lot about gsap ..thank you very much for your efforts

[hyderali]

Sir i have a question about this direction i want make slider from left to right nd right to left both side i have create right to left but i dont have idea how to create left to right scroll horizontal effect kindly help me with thats i will be very thankfull to you....❣️🙌
< I am waiting for your msg ✨>

[mgbpytr]

hi sir, i want this effect only from 768px to 2079px . how can i ignore this animation in small screen devices l mean width < 768px
Thank You

[Vanderhart]

¿Does this work in safari? It use to work in Chrome but not in Safari (I think, waiting for your answer :))

Great job!

[D.Dollart]

Can you do that with images instead of text?

[radovanbotik]

Took me while to figure out why I couldnt get this to work, I discovered it was display flex (flex-column), that wouldnt let me animate till end. I tried to play with different properties on my child <div> using flex-shrink, flex-grow, flex-basis but couldnt make it worth. In my case the display flex on topmost parent is not neccessary but regardless I am curious. it definitely has something to do with pinning because it would let me scroll only about 20% of the whole amount. I tried with display grid and that will work. so if anyone has similiar structure to this, just get rid of flexbox. (I am using react + tailwind)

<section className=''flex flex-col">
<div></div>
<div></div>
<div>
<div>
<h1>content to display</h1>
<h1>content to display</h1>
<h1>content to display</h1>
</div>
</div>
</section>

[adityasutar]

I attempted to use the same code, but I encountered a lagging issue. Could you provide assistance with resolving this issue? @snokerITV