Skip to main content
J
3mo ago

It’s gotta be a simple solution …

Hey, team. I’m pretty new to Rive. I know I missed a step or something, but I need some help.

I have a very basic, linear animation that has a trigger for a secondary linear animation, then exits. The elements for both timelines are on the same artboard, and both timelines begin from the same design state. The object in the first timeline starts from the design state and bounces around a bit then settles back to the design state. In the second timeline, the object starts in the design state, then separates into two objects, one of which finishes off an animation.

When I play both timelines independently, they behave properly. When I set it up in the State Machine, it exhibits an odd behaviour I’m not sure how to fix. When I trigger the transition to the second timeline, it works and the 2nd timeline plays through … but it doesnt play from the design state like I want it to. It plays from the orientation of the object in the first timeline at the moment I trigger it.

Does that make sense? How do I get the second timeline to revert to the design state before starting its animation?

Thanks!

4 replies
J
3mo ago

Yep, that makes sense and I think I have an idea as to what's wrong. Let me give an example:

  1. Let's say you have a square on your artboard and its default color is yellow

  2. When you click play, the first timeline (let's call it "idle") only animates the square's position up and down, not it's color. As you'd expect, the square stays yellow.

  3. When you click on the square, it triggers a new animation called "blue" and the square turns blue

  4. When "blue" is done, it returns to the "idle" animation

In this case, what color will the square be? You might think the answer is yellow, but it's actually blue. This is because the last time there was a keyframe for controlling the color, it was set to blue. Because "idle" doesn't key the color, it stays blue.

So how do we fix it? Simple - just make sure the "idle" animation has a keyframe that will set the color back to yellow.

If I misunderstood your question, please send your .rev file and I'll take a closer look. :)

J
(edited) 3mo ago

Thanks for the reply.

Before I send the .rev file, I was wondering this AM if some more context would be helpful.

Im making an animation for integration into an app with Flutter. I had assumed that what I would have to do is build a state machine that handles the behaviour, but now Im wondering if I actually just have to provide separate Rive files of each animation that my developer will then take over and build the functionality into.

So, if you're a user and you choose to click on this halfway through the animation cycle on the first timeline, the second timeline starts right there, potentially causing misalignment and cutoff of the animation when it lands.

TL;DR - I think Im thinking about this too much like an editor/animator than a developer, and the one I am working with is also learning to integrate Rive animations, FWIW.

This is a share link to the project as it stands.

https://rive.app/s/LzFj0t8-YE6hSNr9u4okDA/

What am I missing?

J
3mo ago

Never mind. I just figured it out. Y'all were correct, I just wasn't seeing where my animation was coming from.

3mo ago

Great! I'm glad you got it sorted.