Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
andystent

Locomotive Scroll and GSAP

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

Share this post


Link to post
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:

 

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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:

 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Please see 

 

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

 

  • Like 1

Share this post


Link to post
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 _=)

Share this post


Link to post
Share on other sites

A custom scrollbar is easy with ScrollTrigger:

 

Share this post


Link to post
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 ♥️

 

 

Share this post


Link to post
Share on other sites

OUYEAH! @ZachSaucier  you are supersupersuperhero!!! brilliant!  thank you so much! 🥂  🚂  

  • Like 1

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
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.

×