Rive for beginners

@radnolan

363.1K followers · usually 14.7K views a post

Views

58.5K

Likes

3.5K

Comments

28

Shares

176

Selling · SaaS › Other SaaS

Rive

Why it worked

The video effectively demonstrates a practical application of Rive by creating an engaging and interactive animation of a recognizable character. The step-by-step tutorial format, combined with clear on-screen text and concise explanations, makes complex concepts like state machines accessible to beginners.

Summary

This video demonstrates how to create dynamic animations using Rive, an animation tool for apps and websites. It shows how to set up keyframes, use state machines to blend animations, and control them with inputs for interactive motion design.

Structure

1Introduction to Rive for beginners
2Entering animation mode and creating keyframes
3Setting up multiple timelines for different eye movements
4Creating a state machine to blend animations
5Adding inputs (X and Y) to control the animations
6Demonstrating the interactive animation

Product placement

Rive: it is an animation tool that allows users to create dynamic animations for apps and websites. It ACTS as the primary tool for creating the animation shown in the video. Removing it would change what happens in the video.

Original caption

If you’re a designer, you can make dynamic animations for your apps and websites with #rive. And the most important thing to learn is state machine. Make some animation timelines with one keyframe each, rig them up in state machine blend animations, and you’ve got dynamic motion design that you can use as interactive animations. #motiondesign #motiongraphics

More from @radnolan

Their other posts in the index, biggest breakout first.

On-screen text

Rive for beginners OPEN RIVE PRESS THE TAB KEY INTO ANIMATION MODE AND MOVING ANYTHING CREATES A KEYFRAME WE CAN MOVE MAKE A STATIC ANIMATION ONE KEYFRAME BECAUSE STATE WE'RE MAKING STEAM WHICH LETS US BLEND ANIMATIONS TOGETHER FOR DYNAMIC INTERACTIONS ON WEBSITES AND APPS SO WE HAVE OUR CHARACTER LOOKING LEFT NEW TIMELINE AND HAVE THEM LOOKING RIGHT WHILE WE'RE AT TIMELINE THAT'S LOOKING STRAIGHT AHEAD ANOTHER THAT'S LOOKING AND FINALLY ANOTHER ONE LOOKING DOWN THAT YOU'RE MOVING THE SAME ELEMENTS DOUBLE CLICK THESE TO RENAME PERFECT HEAD TO STATE MACHINE WHAT'S A STATE IT'S A LOGIC CONTROLLER THAT RECEIVES DATA POINTS THROUGH CODE 5 MINUTES LATER... FIVE MINUTES LATER BLENDED INTO DYNAMIC ANIMATIONS TIMELINE AND PRESS THIS ICON TO A BLEND ANIMATION SET IT TO RIGHT AND THE NUMBER TO 50 ADD ANOTHER SET NEGATIVE FIFTY THEN CHANGE THIS ONE TO STRAIGHT AT 0 AN INPUT TO CONTROL THIS SO CLICK INPUTS ADD A NUMBER THEN SET THE BLEND INPUT TO X PRESS PLAY NOW IF YOU CLICK AND DRAG X REPEAT THESE STEPS WITH UP AND Y INPUT AND WOW WOW THAT'S SO BEAUTIFUL A MOUSE HANDLER WHATEVER

Transcript

Rive animation for beginners. Open Rive, press the tab key into animation mode. And moving anything creates a keyframe. We can move, make a static animation, one keyframe because we're making state. Which lets us blend animations together for dynamic interactions on websites and apps. So we have our character looking left. New timeline and have them looking right. While we're at it, make a timeline that's looking straight ahead, another that's looking up, and finally another one looking down. Just make sure that you're moving the same elements every time. Double click these to rename. Perfect head to state machine. What's a state machine? It's a logic controller that receives data points through code. Five minutes later... blended into dynamic animations. Select the entry timeline and press this icon to turn it into a blend animation. Add a timeline, set it to right and the number to 50. Add another set to left, negative 50. Then change this one to straight at 0. We need an input to control this. So click inputs, add a number, call it X. Then set the blend input to X. Press play now. Now if you click and drag X, it makes them turn. Repeat these steps with up and Y input and wow. Wow, that's so beautiful. Next step is a mouse handler, whatever.