Jump to content
Search Community

Constant spinning element when no action and rotating according to scroll direction

logimw test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello Dear GSAP Community,

 

Could someone help me to achieve cool effect in my codepen? As You can see there is image of blue bubbles which I want to rotate.  This is description what I would like to receive:
 - The image has to react on scroll speed and direction. The faster You scroll, the faster it is spinning, also with differend spinning direction. It is already working.
 - When page is not scrolling the image is rotating itself, but it direction of rotation is dependent from last scroll direction or rotate right, when first time on page and not scrolled yet.

You will see this effects but bugged. There is no smoothly change animation, but its reset when stop scrolling.
So, those animations are there, but they are not cooperating with each other and probably they won't work due to way I wrote there. Is it possible to make it work?

I hope everything is understandable.

See the Pen BaWjWNy by logimw (@logimw) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

You can animate the timeScale property of an animation, which will allow you to speed it up, slow it down, and even reverse it. 

 

This is just a simple example to get you on the right path.

 

See the Pen 757e8becab6817e805dbea2f14f9f95b by osublake (@osublake) on CodePen

 

You could definitely add in more logic to intensify the timeScale value, kind of like here.

 

See the Pen eYpGLYL by GreenSock (@GreenSock) on CodePen

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

@OSUblake You are the best and Your answer was very helpful. The timeScale was new solution for me, now I understand how should it work and it gave me new experience. Thank You also for official example, of course I saw that before, but I didn't realised that will appropriate for my problem.
I love You (no homo).

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