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

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.

×