Jump to content
GreenSock

Bram Huisman

Increase rotation speed based on scroll

Recommended Posts

Hi guys,

 

I would like to increase the rotation speed of a infinite spinning circle when i'm scrolling inside a scrolltrigger section.

Is this possible? I've made a quick example inside a codepen to demonstrate.

 

 

So for clarity:

When a user enters the scrolltrigger section and scrolls the rotation speeds should increase a bit.

 

Sidenote: i'm building this in vue in combination with LocomotiveScroll (smoothscrolling)

This video shows my actual project: 

 

 

 

See the Pen GRZLaqP by bram-huisman (@bram-huisman) on CodePen

Link to comment
Share on other sites

Hey Bram. Welcome to the GreenSock forums and thanks for supporting GreenSock with a Club GreenSock membership! 

 

Yes this is definitely possible. In general when "doubling" animation of the same properties of the same object it's best to just use layered animations. What I mean by that is that you animate the actual element with one animation and animate a container around the element just for the purpose of doing a second animation of the same property. That way you don't have to worry about conflict between the animations but you can still get the effect that you want. In your case you could just rotate .circle-wrap.

 

To get the velocity, use ScrollTrigger's built in .getVelocity() method as this pen demonstrates.

 

Here's one way to set it up (obviously you'll need to play with the values to get it looking good).

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

  • Like 1
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.
×