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.
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 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
Start building beautiful interactive graphics
Join our newsletter
Get all the latest Rive news delivered to your inbox.