Jump to content
Search Community

Accelerating or easing transition duration on hover

granularclouds test
Moderator Tag

Recommended Posts

I searched around for how to accomplish something like this, but I couldn't find anything even close, so I'm posting here in an attempt the community has an answer or can refer me to the right methods/techniques to use.

 

Here's a very simple example of what I'm trying to accomplish, here in (S)CSS: https://codesandbox.io/s/condescending-monad-23udg?file=/src/App.js

 

I have an element that's slowly rotating, and on hover of another element (or the parent container of both elements, it doesn't matter), I'd like the rotation to speed up and become quickly. Basically, I want to transition the transition, instead of - as is the case with CSS right now in my sandbox example - jumping from the 30s transition to the 10s transition.

 

Any help would be greatly appreciated, thanks.

 

Also, I've used GSAP plenty with React, so don't worry about fitting any solutions to my React template, I can do that myself - though it would of course be nice!

Link to comment
Share on other sites

you can achieve this by tweening the timeScale() of a tween.

Rollover the red svg

See the Pen abLbyGj?editors=1010 by snorkltv (@snorkltv) on CodePen

 

Here is a video with an older gsap syntax that explains the concept

 

Check out the courses in my signature. You can enroll for free tonight. Once you enroll, my GSAP 3 Beyond the Basics course walks you through tweening the progress() and timeScale() of a tween in the first chapter and loads of other important stuff. 

  • Like 5
Link to comment
Share on other sites

I'll spin up a demo and post here tomorrow (EST here). I've only tested two browsers (Firefox and Brave) on a 2019 MBP, so nothing conclusive. But viewing the windows side by side, there definitely seems like a difference in frame-rate or smoothness. Not major, just a difference. In production, the element I'm aiming to animate in this manner is small enough that the judder is really not that discernible, also, so I'm happy either way.

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...