Skip to main content
8mo ago

Transition Button Animations

Hello, I'm trying to transition the idle animation of a button with the hover animation of the same button. The idle is a spinning star and the hover is the same spinning star but larger and a different color. They are spinning at the same rate and duration.

I set them up in the state machine and the mouseover functions correctly, but the animations don't transition concurrently. It appears as if one animation tries to start at a different frame when it's activated. This creates strange spinning between transitions sometimes. I figure this is a duration value problem. Normally it's useful to help transition timelines, but it seems to throw off the timing between animations in this case.

Alternatively I could have no duration value and the timelines would pop between each other, but I am trying to see if its feasible to have a smooth transition between the size and color of these timelines. Any help is much appreciated, thank you in advance.

I'm on Google Drive 128.0.6613.85 (Official Build) (arm64), MacOS Sonoma V14.7

What the timelines and state machine look like. About halfway through the state machine test you can see the smooth transition I'm trying to achieve. It happens a few times before reverting to the unpredictable transition.

Timeline idle: https://tinyurl.com/3caz8c46

Timeline hover: https://tinyurl.com/2a3ks78k

State Machine: https://tinyurl.com/4ru76apa

1 reply
8mo ago

I think the easiest solution would be to put the rotation in its own timeline and on its own state machine layer. Then on hover you only need to change the color and size. Here's a video that should help you out: https://rive.app/community/doc/layers/docQI8guiwME