logimw Posted May 12, 2021 Share Posted May 12, 2021 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 1 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted May 12, 2021 Solution Share Posted May 12, 2021 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 5 1 Link to comment Share on other sites More sharing options...
logimw Posted May 12, 2021 Author Share Posted May 12, 2021 @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). 1 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now