Rive Blog

Design vs Animate Mode

Rive has innovative interactive features that are not typically found in other design tools.

-

Tuesday, September 13, 2022

Rive Blog

Design vs Animate Mode

Rive has innovative interactive features that are not typically found in other design tools.

-

Tuesday, September 13, 2022

Rive Blog

Design vs Animate Mode

Rive has innovative interactive features that are not typically found in other design tools.

-

Tuesday, September 13, 2022

Though most of Rive’s design and animation features will be familiar to creators, there are innovative interactive features that are unique to Rive.

The first unique feature you’ll probably notice in the Rive Editor is that it has two modes: Design and Animate. This differs from tools like Figma and After Effects because Rive exports interactive content.

Design Mode

Use Design Mode to prepare your graphics for animation. This is where you can design your own graphics with Rive's tools, import graphics from other software, or rig your graphics with bones, transform spaces, and constraints.

Think of Design Mode as the default starting point before any interaction or animation has happened. Anything you want to animate or interact with must exist in Design Mode first.

Animate Mode

Animate Mode is where you bring your graphics to life with animations and state machines.

Think of animations as states for your artboard. When a user interacts with your file (like a click or a hover), it causes different animations to play.

The State Machine is how you control which animations play. You can layer and mix these animations together to create interactivity. To learn more about this, read my blog on creating an interactive component with Rive’s State Machine.

Dive deeper into the concepts covered

🎓 Build an interactive star rating component with Rive's State Machine
📺 Animation mixing
📖 Learn more about Rive's State Machine

Though most of Rive’s design and animation features will be familiar to creators, there are innovative interactive features that are unique to Rive.

The first unique feature you’ll probably notice in the Rive Editor is that it has two modes: Design and Animate. This differs from tools like Figma and After Effects because Rive exports interactive content.

Design Mode

Use Design Mode to prepare your graphics for animation. This is where you can design your own graphics with Rive's tools, import graphics from other software, or rig your graphics with bones, transform spaces, and constraints.

Think of Design Mode as the default starting point before any interaction or animation has happened. Anything you want to animate or interact with must exist in Design Mode first.

Animate Mode

Animate Mode is where you bring your graphics to life with animations and state machines.

Think of animations as states for your artboard. When a user interacts with your file (like a click or a hover), it causes different animations to play.

The State Machine is how you control which animations play. You can layer and mix these animations together to create interactivity. To learn more about this, read my blog on creating an interactive component with Rive’s State Machine.

Dive deeper into the concepts covered

🎓 Build an interactive star rating component with Rive's State Machine
📺 Animation mixing
📖 Learn more about Rive's State Machine

Though most of Rive’s design and animation features will be familiar to creators, there are innovative interactive features that are unique to Rive.

The first unique feature you’ll probably notice in the Rive Editor is that it has two modes: Design and Animate. This differs from tools like Figma and After Effects because Rive exports interactive content.

Design Mode

Use Design Mode to prepare your graphics for animation. This is where you can design your own graphics with Rive's tools, import graphics from other software, or rig your graphics with bones, transform spaces, and constraints.

Think of Design Mode as the default starting point before any interaction or animation has happened. Anything you want to animate or interact with must exist in Design Mode first.

Animate Mode

Animate Mode is where you bring your graphics to life with animations and state machines.

Think of animations as states for your artboard. When a user interacts with your file (like a click or a hover), it causes different animations to play.

The State Machine is how you control which animations play. You can layer and mix these animations together to create interactivity. To learn more about this, read my blog on creating an interactive component with Rive’s State Machine.

Dive deeper into the concepts covered

🎓 Build an interactive star rating component with Rive's State Machine
📺 Animation mixing
📖 Learn more about Rive's State Machine

Start building beautiful interactive graphics

Get Started

© 2022 Rive, Inc. All rights reserved.

All trademarks, logos, and brand names are the property of their respective owners.

© 2022 Rive, Inc. All rights reserved.

All trademarks, logos, and brand names are the property of their respective owners.