GreenSock ScrollTrigger with Smooth Scroll (locomotive)

[@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???

[@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

[@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.

[@LetsGoEd]

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

[@CodingWithLewis]

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

[@snorklTV]

Glad it helped!

[@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. ✌🏻

[@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

[@ojovemdev]

This video is a LIFESAVER!

[@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 👌

[@miehackhd5027]

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

[@snorklTV]

Great to hear, thanks!

[@ISO50F8]

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

[@rahuli]

You will be forever my hero

[@romuald4736]

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

[@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.

[@jasamansingh21]

Thank you so much brother you helped me alot by this!! A vig thanks to you ❤️

[@alexwang8909]

This video save my time and really helpful. Thanks.

[@mindbodyps]

To the point video, nice work man, respect

[@borondevelopment2038]

thaaanks man, you saved my project :D

[@snorklTV]

Awesome. Great to hear

[@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.

[@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.

[@morchedlafferty8614]

Damn. What a presentation

[@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.

[@ProoksiusSvaagali]

thanks, saved a lot of time

[@akmalislamov4469]

God bless you my brother

[@snorklTV]

He has. Thanks for watching.

[@akmalislamov4469]

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

[@PaulMangnall]

Great video. Thank you for your efforts.

[@lamtruong8740]

You sir, are a lifesaver!

[@snorklTV]

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

[@Question418]

I just got an Inspiration while watching this

[@rajeshdoot]

Thank you. Useful tutorial

[@kyryloren]

Awesome video! Helped out a lot!

[@juanmoraromero1579]

Thank you so much for this!

[@magdasokolovic]

very good video! Thanks

[@OoohBoi]

Thanks a TON, mate!!!

[@ninaann23]

Thank you so much! 💓

[@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.

[@aslankadirovich6055]

Thanks a lot, Carl! Great video!

[@snorklTV]

so glad you liked it. thx!

[@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.

[@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...

[@mtpk0]

Thank you!!!

[@snorklTV]

You're welcome!

[@mindbodyps]

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

[@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

[@ZrNina]

Thanks a lot, I love u !

[@stanislav1884]

man, u save my life) Thanks!!!

[@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 🖤

[@zainyzain6471]

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

[@salvodante]

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

[@giorgikiladze1151]

thanks it was helpfull

[@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 .

[@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 :(

[@ShuvaPatra-w7b]

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 });

[@stanislav1884]

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

[@webdesigner2714]

can we have this with react??

[@EpicEren]

how about horizontal scroll?

[@snorklTV]

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

[@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

[@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.

[@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

[@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

[@EpicEren]

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

[@ms_zaman]

Your are Gem

[@snorklTV]

Thank you

[@davedave9]

This was a very cool video, alright?

[@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

[@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 :))

[@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

[@vijithuae]

❤️❤️❤️👏👏👏

[@vittomed4681]

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

[@DerMBen]

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

[@ashawesomeone]

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

[@pita___311]

Thank you so much!!