GreenSock ScrollTrigger with Smooth Scroll (locomotive)

Learn how to incorporate smooth scrolling with ScrollTrigger. Your scroll driven GreenSock animations can now be silky smooth.
Grab the demo and read the full free blog post at
www.snorkl.tv/scrolltrigger-s...
*loads of ScrollTrigger videos and demos **
Check out my premium course ScrollTrigger Express
www.creativecodingclub.com/co...

[@snorklTV]

Like this video. I have a ton more in ScrollTrigger Express (no ads) www.creativecodingclub.com/courses/scrolltrigger-express

[@subburoyal3634]

Dude everything is great but when it comes to the scrollTO plugin in gsap it is not working when we have to scroll to the sections like scrolltotop everything having blocked and things getting messed up can You help us from that???

[@tilakoli89]

All I wanna say is we need more tutorials like this with all the errors and the mistakes we make and how can we correct them. This was a really awesome turorial.

[@evanchan52]

I've never seen anyone this detailed and "caring" when it comes to making tutorials. Thank you!

[@snorklTV]

Wow thanks for the lovely comment

[@romuald4736]

Thanks a lot for this video, very clear and concise! I was looking for something like this 👏

[@amirrezaee5809]

I am new in GSAP and really like that. this video helps me a lot. Thanks for sharing.

[@Arominit]

Wow this really saved me so much time, mission accomplished. And great fun narration 👏🏻

[@snorklTV]

So glad you liked it. Thx for the comment. Have a great day.

[@ead5590]

Thanks a lot! I approached KZbin right away to make GSAP work with Locomotive Scroll and found your video. These 20 minutes were not only well spent but saved me from spending far more than I would have to. Thanks again. ✌🏻

[@BOXZAA]

Amazing tutorial, I'm brand new to GSAP and would of never figured this out by myself. But just following along I had it cracked in 20 minutes! Thanks a lot 👌

[@ojovemdev]

This video is a LIFESAVER!

[@LetsGoEd]

I spent a day trying to figure this out. Still couldn't solve it. In 20 minutes, I learned important stuff! Many thanks.

[@alexwang8909]

This video save my time and really helpful. Thanks.

[@PaulMangnall]

Great video. Thank you for your efforts.

[@kyryloren]

Awesome video! Helped out a lot!

[@mindbodyps]

To the point video, nice work man, respect

[@salmanlakhani5826]

Bro, I have skipped a project just because they both were not working at the same time and after that, I never used locomotive and scroll trigger at the same time again but after this video I'm continuing that project again thanks man

[@rahuli]

You will be forever my hero

[@naimurhasanrwd]

You got me buddy. How do you know! I always encounter those issues and then change my mind not use/implement and skip. But you just showed what could be happen, if I keep trying!!! Thanks a ton man.

[@aslankadirovich6055]

Thanks a lot, Carl! Great video!

[@snorklTV]

so glad you liked it. thx!

[@CodingWithLewis]

Almost pulled out my hair today. This was an incredible tutorial. Thank you so much.

[@snorklTV]

Glad it helped!

[@juanmoraromero1579]

Thank you so much for this!

[@lamtruong8740]

You sir, are a lifesaver!

[@snorklTV]

Happy to help. thanks for taking the time to let me know

[@rajeshdoot]

Thank you. Useful tutorial

[@miehackhd5027]

I appreciate this tutorial, just the right format of how coding should be taught.

[@snorklTV]

Great to hear, thanks!

[@morchedlafferty8614]

Damn. What a presentation

[@ProoksiusSvaagali]

thanks, saved a lot of time

[@magdasokolovic]

very good video! Thanks

[@OoohBoi]

Thanks a TON, mate!!!

[@miad7202]

Thank you so much! 💓

[@borondevelopment2038]

thaaanks man, you saved my project :D

[@snorklTV]

Awesome. Great to hear

[@pita___311]

Thank you so much!!

[@BobbyValenzuela]

DUDE! You are an absolute life saver!!! SUBBED!!!

[@snorklTV]

Bobby Valenzuela glad it helped. Thx for watching.

[@BobbyValenzuela]

@@snorklTV No, thank YOU for being the real MVP

[@stanislav1884]

man, u save my life) Thanks!!!

[@mtpk0]

Thank you!!!

[@snorklTV]

You're welcome!

[@ZrNina]

Thanks a lot, I love u !

[@Question418]

I just got an Inspiration while watching this

[@giorgikiladze1151]

thanks it was helpfull

[@akmalislamov4469]

God bless you my brother

[@snorklTV]

He has. Thanks for watching.

[@akmalislamov4469]

bro i have some problems, could you help me please@@snorklTV ?

[@derekkc7299]

OMG I thank you very much for this video, I spent almost 2 full days try to figure out why gsap not working with locomotive scroll interaction, doesnt work until your video.

[@pablitooten]

You are amazing teacher. What is disturbing is the complexity of internal code that some guys do to make work together scrolltrigger and locomotive... I just copy and paste and follow your instructions, without your help this is just an imposible task. Thank you so much.

[@ms_zaman]

Your are Gem

[@snorklTV]

Thank you

[@MarkHerpich]

Thanks for this, it finally works. But I got a problem by using it within VUE that it only works on initial/hard page load and not on route change. Any suggestions? I must reinitialize or update the scroller after the url changed., but don't know how.

[@shoshkich]

Thank you for this video! I'm currently facing a general issue with using ScrollTrigger and Locomotive Scroll. Animations, e.g. moving a div by 200px horizontally upon reaching "top top" works on all Browsers only if I'm in inspection mode. It makes me crazy... Have you ever faced something like this? I am talking about any animation with ScrollTrigger. I'm going crazy...

[@mihailodukic601]

Can you do a video on fixed elements :). Been having issues. I have a fixed menu on the right side . It doesn't work properly .

[@vijithuae]

❤️❤️❤️👏👏👏

[@mindbodyps]

Can you make video on how we can use this gsap in react

[@EpicEren]

Can you please do a video for a horizontal scrolling website? :D

[@dotsona07]

How does this differ from the gsap smooth scroll plugin, is it just that locomotive is free while smooth scroll isn't?

[@snorklTV]

Scrollsmoother is sooo much easier to use, integrated with ScrollTrigger, has cool features and is 100% supported by GreenSock. Check it out greensock.com/scrollsmoother/?ref=6234 I prefer it over locomotive scroll.

[@davedave9]

This was a very cool video, alright?

[@zainyzain6471]

we need full play list on locomotive scroll with gsap scrol trigger

[@stanislav1884]

and I had an error with ScrollTriger. Fix it by adding gsap.registerPlugin(ScrollTrigger);

[@salvodante]

Awesome video..however it seems that if you do not put scrollTrigger inside of the timeline ...sadly animation will not work...(:

[@safsafaf2838]

Hello, can someone help please? it doenst work for me.I have installed it, i have linked the css file. But in console i have: Uncaught SyntaxError: Cannot use import statement outside a module .. and in my index.js is --> '

[@chantalestevez6298]

Hey! did you figure this out? I have the same error

[@safsafaf2838]

@@chantalestevez6298 nope :(

[@user-ur7ih7du2x]

dont use import as we are already usng their cdn of js and css: const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true });

[@webdesigner2714]

can we have this with react??

[@vittomed4681]

why do you sound so much like dcode? ,anyways great vid ,i freakin hate the docs and u saved me ty

[@zeref5152]

Simple button like back to top doesn't work with smooth scroll libraries, any fix for that, i need it

[@snorklTV]

Perhaps try GreenSock's ScrollSmoother. codepen.io/GreenSock/pen/KKXZOyZ For followup questions please use the greensock forums for best advice.

[@snorklTV]

also, here are the docs: greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

[@zeref5152]

Aight tysm, i needed that 🖤

[@Kai-cz7wf]

Heyy Can anyone help me I am doing the same at 15:20 but getting a error "locoScroll.on is not a function".. Can anyone please help me with this

[@DucNguyen-qn7gl]

So if i have more than 1 scrolltrigger, i need to do thay with all of them ?

[@snorklTV]

actually no. you should only need one scrollerProxy() that communicates between ScrollTrigger and your smooth scrolling lib.

[@DucNguyen-qn7gl]

snorklTV so how other scrolltrigger know? I have more than 1 timeline and each has 1 scrolltrigger. Thanks

[@DucNguyen-qn7gl]

snorklTV i though scrolltrigger is one object in timeline so they are individual

[@snorklTV]

@@DucNguyen-qn7gl ScrollTrigger.scrollerProxy() is a static method which means it applies to the whole class. please study this greensock demo that shows multiple timelines using locomotive scroll. there is only 1 scrollerProxy() codepen.io/GreenSock/pen/1dc38ca14811bc76e25c4b8c686b653d?editors=0010 // if you need support help please post a demo in the GreenSock forums.

[@DucNguyen-qn7gl]

snorklTV Thanks for quickly reply . +1 sub :))

[@oelhow]

i have a problem it says to me that ScrollTrigger.scrollerProxy is not a function any idea?

[@snorklTV]

That can happen if ScrollTrigger isn't loaded yet, I'd suggest you verify that with a console.log(ScrollTrigger). Feel free to post a demo in the greensock forums if you need more help. I can't really offer detailed support here. greensock.com/forums/forum/11-gsap/?ref=6234

[@sourabh2505]

man i added this in my code its working well when im scrolling down but it isnt working well when im scrolling up, im trying to fix this issue from 5days can anyone help me coz now its frustrating

[@SumitBasnet-so5tz]

how do u solve this problem in react? can anyone help me? i am using gsap and locomotive scroll

[@snorklTV]

Thanks for watching. Sorry, I can't offer any help for React. Your best bet is to post a simple demo in the GreenSock forums: greensock.com/forums/forum/11-gsap/?ref=6234

[@DerMBen]

Today I learned: Chrome has smooth scrolling integrated and activated by default...

[@EpicEren]

how about horizontal scroll?

[@snorklTV]

I'm not sure. I haven't tried it.

[@FarukAhmed-pc5hn]

What about the fixed elements? Position: fixed elements not working!

[@snorklTV]

Perhaps this will help explain why. github.com/locomotivemtl/locomotive-scroll/issues/282 also try the GreenSock forums.

[@TheProfessorMA]

How to fix it using React please.

[@snorklTV]

Thx for watching. I don’t use React. Maybe try posting your issue in the GreenSock support forums.

[@TheProfessorMA]

@@snorklTV thx brother

[@ashawesomeone]

you just saved a life (of someone who i was about to kill)