Jump to content
Search Community

Locomotive Scroll and GSAP

andystent test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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:

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

 

  • Like 6
Link to comment
Share on other sites

  • 3 months later...

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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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 :D

 

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.

  • Thanks 1
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

@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 _=)

Link to comment
Share on other sites

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 ♥️

 

 

Link to comment
Share on other sites

  • 2 months later...
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.

 

Link to comment
Share on other sites

  • 1 year later...
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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...