Increase rotation speed based on scroll

[Bram Huisman 0 Likes (Newbie)]

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

[ZachSaucier 7,152 Likes (Superhero)]

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

[mikel 4,775 Likes (Superhero)]

Hey @Bram Huisman,

 

Here are a few ideas

 

See the Pen YzyVpwg?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel