Locomotive Scroll and GSAP

[andystent]

Hey guys,

 

I wonder if you could give me some advice again

 

I am using the Locomotive smooth scroll script (https://locomotivemtl.github.io/locomotive-scroll/), which gives my projects a beautiful buttery scroll effect but I need some help with playing GSAP animations along with this when the target element comes into view.

 

You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed.

 

Maybe something to keep looking for changes on the elements?

 

Any ideas?

 

Huge thanks as always!

Andy

See the Pen JjdvqEJ by andystent (@andystent) on CodePen.

[ZachSaucier]

Hey Andy! We're here to help. What do you need help with? What's causing you issues? Unfortunately we don't have the capacity to build out every project that people post here in the forums  

 

Also, that's a lot of code for a smooth scroll effect. Maybe you could use GSAP to do the smooth scroll instead:

 

[andystent]

Thanks for the quick response Zach.

 

You could actually ignore all the JS (it's just copied from the min.js file) with the exception of the basic TimelineMax animation at the top.

I've updated the Pen to make that clearer.

 

I guess all I really need help with is playing an animation when a class is added to an element. Do you know how to achieve this?

 

Thanks,
Andy

[ZachSaucier]

4 minutes ago, andystent said:

I guess all I really need help with is playing an animation when a class is added to an element. Do you know how to achieve this?

There is no "add class" event. There has to be some JS that adds the class. Find that JS and add the animation there. 

 

This is a question for the scroll library you're using. 

 

4 minutes ago, andystent said:

You could actually ignore all the JS (it's just copied from the min.js file)

I understand, but what's the point in loading it if GSAP can do the same thing?

[OSUblake]

2 hours ago, andystent said:

You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed.

 

You should probably read through their docs. It says there are events, which you should be able to use to control gsap animations.

https://github.com/locomotivemtl/locomotive-scroll

 

 

[andystent]

Thanks Blake, I'm looking into that at the moment.

[Mlbb lan]

my dear friend.  I ran into a problem and want to implement this library, if you figured it out, could you throw off an example of a site that uses locomotive scroll + fixed blocks?

[ZachSaucier]

Hey @GeS and welcome to the GreenSock forums! Have you looked into using ScrollTrigger to create the effects that you're looking to create? I think it's more intuitive and definitely more powerful:

 

[Mlbb lan]

it's not that the locomotive library is relatively new and perfect, thanks to it it is a lot to create sites with smooth scrolling and at the same time with fixed blocks (sticky positions), achieving the same effect as for example on this site: https://thierrychopain.com  / I can achieve a better user experience.All awwwards are filled with sites that already use this library successfully.Also the disappearance of the scrollbar and the appearance when scrolling looks very elegant and does not distract the user. I really hope that they will prompt me or show an example html  and css to achieve these effects when using the locomotive library

[GreenSock]

Please see 

 

[andystent]

Hey @GeS

 

I have been using Locomotive on a few projects and recently switched them all over to the GSAP Scroll Trigger plugin. Once I understood how it all worked the change over was fairly easy. I can achieve the same effect, and more, with so much more control. And it's all in the same comfy GSAP ecosystem

 

This is a very basic (and ugly) test I put together to create the Locomotive smooth scrolling effect for an entire web page using the new Scroll Trigger plugin.

See the Pen XWXbMLo by andystent (@andystent) on CodePen.

 

You can then combine this with something like Jack shared above to get the horizontal scrolling panel. I'm going to be doing this on a new project starting next week. Can't wait!

See the Pen 1e42c7a73bfa409d2cf1e184e7a4248d by GreenSock (@GreenSock) on CodePen.

 

Good luck!

[ZachSaucier]

.scrollerProxy seems to work well with Locomotive Scroll:

See the Pen da1d36b83c758c3c4bf5c98c4fa70d8d?editors=0010 by GreenSock (@GreenSock) on CodePen.

[fogseller]

hey @andystent that is exactly what i need thank you!

 

but did you manage to emulate smooth scrollbar like in Locomotive scroll and also appearance and disappearance when scrolling? 

Thank youu

 

[andystent]

11 hours ago, fogseller said:

hey @andystent that is exactly what i need thank you!

 

but did you manage to emulate smooth scrollbar like in Locomotive scroll and also appearance and disappearance when scrolling? 

Thank youu

 

No problem   I haven't looked at the scrollbar itself to be honest. One thing to remember though is that ScrollTrigger is not hijacking the browser scrolling so the scrolling and scrollbar as far as the browser are concerned are moving at the regular pace. I hope that makes sense.

[fogseller]

@andystent i know about scroll hijacking, but

can someone smarter then me ? do it just for fun? ? locomotive scroll scrollbar looks and works great but thats also hijackings, is it? Everything else can be done with Scrolltrigger quicker and easier. But, that sweeeet little scrollbar ??❤️Anyone have any hints?(except, dont do it ?) thank youuuuu,

and thank you again andy for great codepen example! 
cheers

New GSAP junkie

[andystent]

Do you have an example link and can you tell me what browser you're seeing the scrollbar in. I'm interested to see what's getting you so excited

 

[fogseller]

@andystent

here are few examples of locomotive websites with custom scrollbar:

https://locomotivemtl.github.io/locomotive-scroll/

https://www.miragefestival.com/2020/

https://www.mazellier.design/

https://abhishekjha.me/muteza/

https://www.izakaya-caen.fr/

https://works.studio/

https://chiaraluzzana.com/

 

i use Chrome but it works in every browser (except scrolling in Firefox for Mac is little slower)

 

can we do it with ScrollTrigger and GSAP?  

 

cheers and thank you _=)

[ZachSaucier]

A custom scrollbar is easy with ScrollTrigger:

 

[fogseller]

hey @ZachSaucier thank you mate  i already saw that, but since i am newbie i cant get it to work and to look like that one in Locomotive scroll (also, it react to hover, probably its just a small tl animation). ?  also, in codepen example it doesn't react to mouse scroll and under custom scrollbar is native scrollbar. and its horizontal...  probably i'm missing something cause i'm new to all this and i can't see something thats obvious. probably too much for me  ? i will keep trying... i appreciate any help. thank youuuu ♥️

 

 

[ZachSaucier]

A slightly more complicated demo with Locomotive Scroll + ScrollTrigger: 

See the Pen 1dc38ca14811bc76e25c4b8c686b653d?editors=0010 by GreenSock (@GreenSock) on CodePen.

[fogseller]

OUYEAH! @ZachSaucier  you are supersupersuperhero!!! brilliant!  thank you so much! ?  ?  

[nolafs]

I notice a strange behaviour. For some reason, my scroll container gets set to opacity 0 at some point. No error,  randomly. Anyone experience the same issue? 

[ZachSaucier]

1 hour ago, nolafs said:

For some reason, my scroll container gets set to opacity 0 at some point. No error,  randomly. Anyone experience the same issue? 

That is indeed peculiar. I haven't heard of anything like that happening. Please make a minimal demo and start a new thread about your issue and we'll do our best to help out.

 

[Mlbb lan]

On 9/16/2020 at 5:48 PM, nolafs said:

I notice a strange behaviour. For some reason, my scroll container gets set to opacity 0 at some point. No error,  randomly. Anyone experience the same issue? 

Yes, I have the same problem
Also, in the browser Chrome I have a site is cut off (it is impossible to scroll the entire site), but if I refresh the page, then I can scroll further, here is a clear example of the problem, can you tell me what the problem is?
https://share.vidyard.com/watch/fp8b4gDvBVYqGfHuwaW8iL?

strange, but in Safari the whole site scrolls to the end without refreshing the page, but as soon as you go to the site

 

[Cassie]

@GeS's issue solved here -