Rive 101

2.0 Getting Started

Summary

The content provides a guide to getting started with Rive — 2.0, covering topics including the file browser, artboards, navigation and selection, and snapping.

Highlights

• 📂 An introduction to the file browser in Rive is given.
• 👀 Readers are oriented with the Rive editor and User Interface.
• 🖼 The role of artboards, and the process of creating new ones in Rive is explained.
• 🔍 Explanation of navigation and selection is provided.
• 📏 It end with a discussion about snapping in Rive.

2.1 The File Browser

Summary

The guide introduces the features of the Rive file browser and file management, including creating and organizing new files and folders, modifying and deleting them, using the search function, and browsing through recents, community and learning tabs.

It also discusses the differences between the free and paid plans.

Highlights

• 🔍 First, the video introduces us to the Rive file browser and discusses how to create new files and folders using the plus buttons or by right-clicking and selecting from a pop-up menu.
• ✨ The video shows how to customize new files with either a blank artboard or pre-existing content with animations and a state machine.
• 📁 The video illustrates how to organize files by creating folders, naming them, and dragging and dropping files into them.
• 🔁 Other file management features include sorting files by modification date or alphabetically, as well as ascending or descending order.
• 🗑️ The video mentions the difference between free and paid plans, particularly in terms of file creation limit and access to a trash folder for deleted files.
• 🔎 There’s a search functionality to help users quickly find files, folders, or teams they need.
• 🎓 The ‘Learn’ tab directs users to various resources to help them better utilize Rive, while ‘Community’ tab connects them with other users for inspiration and learning.
• 🚀 The video ends by highlighting the workspace area and the option to upgrade to a studio plan.

2.2 Interface overview

Summary

This summary explains the usage and functionalities of the Rive software’s interface.

Highlights

• 🏗️ The interface of the Rive editor is divided into Design Mode and Animate Mode, which users can switch between.
• 🖥️ The editor automatically updates according to the selected mode, with Design Mode used for designing and rigging, and Animate Mode for creating animations and state machines.
• 💻 The stage is in the center of the editor and is where design and animations are developed.
• 🔍 The inspector on the right shows attributes of the selected object.
• 🌳 The hierarchy on the left provides a tree view display of the currently associated Artboard.
• 🗂️ The assets panel next to the hierarchy displays uploaded items.
• 🧰 The top of the editor houses the toolbar and the file menu for design creation, rigging and file management.
• 🎬 Animate Mode presents a timeline and additional properties for animation elements.

2.3 Navigation

Summary Navigation tutorial focuses on various ways users can navigate the stage and zoom features.

Highlights

• 🖥️ The stage can be moved around by pressing the space bar, turning the cursor into a hand, which users can then click and drag to move the canvas.
• 🖱️ Users can also move the stage around by holding the right mouse button to click and drag.
• 🔎 The F key is used to zoom in to fit the artboard into the workspace.
• 👆 Commands like command+0 or Control+0 can be used to return to the original zoom level, and plus and minus keys can also control zoom levels.
• 🎚️ Fine control of zoom level can be achieved by holding command on Mac or control on Windows.
• 🤏 Users with a trackpad can use the pinch gesture to zoom in and out.
• 📌 The ‘View options’ menu can also be used to change zoom level and reference the various shortcuts.
• 🎯 The ‘F’ shortcut works differently depending on selection — if nothing is selected, it fits the artboard to the viewport; if a character is selected, it fits the character to the viewport.

2.4 Selection

Summary

Selection in the animation platform, explaining how the selection tool functions, including various shortcuts and features such as the Marquee select, adding and removing from a selection, selecting specific shapes within groups, and navigating up and down the hierarchy.

It further discusses standalone transformation tools for translation, rotation, and scaling.

Highlights

• 🔍 The Selection tool in Rive is used for selecting different characters and objects, which can be manipulated using different shortcuts.
• 🖱️ Clicking and dragging enables Marquee selection, allowing one or more objects to be selected simultaneously. Clicking outside of the selected area or using the ‘Shift’ key can add or remove objects from the selection.
• 🔎 🐭 By double-clicking on a group, one can navigate down the hierarchy and select a specific shape within the group, while the ‘Escape’ key allows you to navigate back up the hierarchy.
• ⌨️ Using ‘Command/Control’ on Mac/Windows respectively allows selection of specific shapes within a group, bypassing the hierarchy.
• ↩️ ‘Enter’ key enables ‘Edit vertices’ mode to modify the selected shape directly.
• 👁️ The ‘Alt’ key allows users to ‘punch through’ an object and select the one behind it.
• 🛠️ The Gizmo tool offers various handles for different transformations — moving objects vertically or horizontally, rotating, or scaling. Holding ‘Shift’ will constrain proportions when scaling.
• 🔀 Additional standalone transformation tools include translation, rotation, and scaling — accessible from the Transform Tools menu. Each has its own shortcut — ‘q’, ‘w’, and ‘e’, respectively.

2.5 Snapping

Summary

The tutorial talks about the snapping feature in Rive.

It explains that the feature allows objects to latch or hook to certain points on the artboard, like the center or the edge. It further clarifies how multiple objects can be snapped together.

The tutorial also explains disabling the snapping feature, or temporarily deactivating it using command on Mac or control on Windows.

Highlights

• 🧲 The tutorial describes the snapping feature as a magnetic attraction between objects.
• 🎯 Snapping aids in aligning to central points, edges and corners on the artboard.
• 🖼️ When multiple objects are added, they snap together when perfectly aligned.
• 🔎 The snapping functionality is especially useful in achieving a precise alignment.
• ❌ Snapping can be disabled from the view options menu if it interferes with tasks.
• 🎮 Alternatively, snapping can be temporarily deactivated with command on Mac or control on Windows.
• 🔄 Releasing the key command reactivates snapping, making it an on-and-off switch option.

2.6 Artboards

Summary

The content gives an in-depth tutorial about how to use artboards in Rive. It explains the various functionalities of an artboard like positioning, size, setting the origin of the artboard, and making changes to the color.

The tutorial further delves into how to render different types of objects and how to manipulate the artboard itself, such as moving it, creating multiple artboards, duplicating it, and naming it.

Highlights

• 🖌️ The artboard in Rive, which the default workspace, is highly customizable with options for position, size, and color changes.
• 📐 The origin property sets the starting measurement point, ideally at 0,0 at the top left corner or 50 by 50 percent for the center.
• 🖼️ The artboard’s content extending beyond the canvas can be witnessed using the unclip checkbox, but only contents within the artboard are rendered.
• 🎨 You can alter the fill option, having options for solid colors or gradient fill. A transparent background is also an option.
• ✏️ Naming and deleting the artboard is also possible using a double click to rename and the delete button to erase.
• 📋 The artboard tool allows you to create multiple artboards of varying sizes, shapes, and proportions.
• 🔁 You can duplicate an artboard and everything inside it using command on Mac or control on Windows.
• 🔄 The active artboard, indicated by an ellipse next to it, determines the properties, state machines, and animations being displayed.
• ➡️ You can move your artboard through selection and using the handles or translate tool.

3.0 Section 3 intro

Highlights

• 🖊️ The section begins with a discussion about design tools like the pen tool and procedural shape tools.
• 🎨 Following this, there is guidance on customizing shapes with fills and strokes.
• ⛓️ An explanation of how the hierarchy works to create parent-child relationships is included.
• 🔎 It also covers the usage of clipping guides, rulers and alignment tools.
• 💻 The section ends with information on importing both vector and raster graphics.
• 📚 Upon completion, learners will have comprehensive knowledge on designing in Rive.

3.1 Pen tool

Summary

Pen tool video demonstrates how to use the pen tool in Rive to create, manipulate, and customize shapes.

The steps involve creating vertices, defining curves using Bezier handles, editing shapes, and altering vertices.

Highlights

• 📝 The pen tool in Rive is used to create new vertices. It can be found in the create tools menu of the toolbar or activated using the P key. Holding the shift key can snap rotations to 45-degree angles.
• 🎯 Clicking and dragging with the pen tool selected allows to drag out the bezier handles and define a curve.
• ✅ Shapes are closed by clicking on the last vertex, and changes can be confirmed by hitting the ‘done editing’ button or using the Escape or Enter key.
• 🎨 Any created shapes appear as new layers — the custom shape layer and the path layer. To edit or resume editing the path, the user must select ‘edit vertices’.
• 🔄 Editing can be expedited using shortcuts: Escape exits the path, and Enter returns to edit vertices mode.
• ➕ With the pen tool, the user can add additional points anywhere on the shape, and with the select tool, the user can adjust existing points. Options are also available to change the type of vertex.
• 🔄 Users can choose from different types of handles, including mirrored handles, detached handles and asymmetric ones. Each offers unique controls over the length, angle, and alignment of the handles.

3.2 Procedural shapes

Summary

This summary focuses on procedural shapes in Rive.

It breaks down how geometric shapes like rectangles, ellipses, triangles, polygons, and stars can be created, edited, and manipulated using the program’s built-in create tools menu.

Highlights

• 👆 Procedural shapes that can be found in the create tools menu include rectangles, ellipses, triangles, polygons, and stars.
• 📏 The dimensions of these shapes can be manipulated using width and height properties, while the shift key can create perfect squares and circles.
• 🔄 The origin property can be used to set the point from which all transformation properties take place.
• 📐 Additional properties in the ellipse tool, triangle tool, polygon tool and star tool offer extra customization parameters, such as defining the number of points.
• 💫 The star tool allows for star shape creation with adjustable points.
• 🎨 Procedural paths can be converted into custom paths for more in-depth edits, but this process is irreversible and once done, some procedural options are lost.
• ✍️ Once converted to a custom path, vertices can be edited, pen tool can be used to add new vertices, and curve adjustments can be made to the shape.

3.3 Fills and Strokes

Summary

This transcript covers the ‘fills’ and ‘strokes’ feature of vector program Rive.

It provides detailed steps on how to select, edit and add styles to fills and strokes in different shapes, introduces options like changing opacity and colour, using radial and linear gradients, and altering positions.

Highlights

• 🎨 Describes how to select and alter the color and opacity of a fill in a shape using the inspector.
• 🌈 Demonstrates how to apply and adjust both radial and linear gradients for a fill.
• ➕ Explains how to add, hide, reorder, duplicate and delete additional fills to achieve desired visual effects.
• 🖊️ Teaches how to add, edit, and manage multiple strokes, including adjusting thickness, color, and style.
• 💾 Shows how to copy and paste styles from one shape to another.
• 🖌️ Discusses the possibility of changing end caps for lines and open paths, and applying linear gradients to strokes.

3.4 Shapes and Paths

Summary

• Shape and path layers are used to create and manipulate objects in Rive.
• Shape layers control aesthetic properties such as fills, strokes, and custom draw orders.
• Path layers define the actual form of the object and can be edited by changing the vertices.
• Procedural shapes need to be converted to custom paths before editing the vertices.
• Path layers can be added to a shape layer by expanding the shape and placing the path onto the desired layer.
• Path layers can be duplicated for reuse in different locations.
• Using multiple path layers on a shape layer allows for easy customization of fills and strokes without overlapping.

Highlights

• 🎨 Shape layers control aesthetics, while path layers define the form of objects.
• 📐 Path layers can be edited by changing the vertices.
• 🔁 Multiple path layers can be added to a shape layer for customization without overlapping strokes.

3.5 Winding and Fill Rules

Summary

This video explains how the direction of a path affects how shapes are filled in Rive.

It covers fill rules, which determine how overlapping paths are filled, and the importance of understanding winding order.

Highlights

• ⏩ The direction of a path, denoted by a triangle, affects how shapes are filled.
• 🔄 Reversing the direction of a path changes its winding order.
• 🌐 The non-zero fill rule fills areas where the resulting value of overlapping paths is non-zero.
• 🔄 Reversing the direction of paths can solve issues with overlapping shapes.
• 🍩 Using fill rules can create holes in shapes, like a donut with icing dripping over the sides.
• 🌈 Mixing colors using a lighting effect may require reversing the directions of paths to ensure proper filling.
• 🛠️ Understanding fill rules and winding order helps solve complex shape problems in Rive.

3.6 Hierarchy

Summary

This video discusses the hierarchy feature in Rive, located on the left side of the editor.

It serves to show everything associated with the artboard, allows renaming of objects, controls draw order, and manages hierarchical relationships.

Highlights

• 📊 The hierarchy displays objects associated with the artboard and updates when a different artboard is selected.
• ✏️ Objects can be renamed by double-clicking on them in the hierarchy.
• 🎨 The draw order of objects can be controlled by rearranging them in the hierarchy.
• 🧩 Hierarchical relationships between objects can be viewed and manipulated.
• ➡️ Objects can be dragged and dropped to change their parent-child relationships.

3.7 Groups and Parent/Child relationships

Summary

In this video, the concept of groups and parent-child relationships is explained.

Groups are used as containers for objects and shapes, and they can also be used as animation controls.

Adding a group to an artboard can be done through the arrangement tools menu or by using the shortcut “G”.

Objects can be added to a group by marquee selecting them on the stage or by using the shortcut “Command + G” on Mac or “Control + G” on Windows.

The group style can be changed to either “Group” or “Target”.

Parent-child relationships are created when shapes are added to a group, allowing changes made to the parent to be inherited by the children.

Highlights

• 📁 Groups are used as containers for objects and shapes.
• 🎥 Groups can be used as animation controls.
• ➕ Objects can be added to a group by marquee selecting them or using the shortcut “Command + G” on Mac or “Control + G” on Windows.
• 📐 The group style can be changed to “Group” or “Target”.
• 👨👧 Parent-child relationships are created when shapes are added to a group.
• 🔄 Changes made to the parent are inherited by the children.
• 📝 Parent-child relationships are useful in building animation controls.

3.8 Origin and Freeze

Summary

This text explains the concepts of origin and freeze in Rive. It discusses how the origin affects transformations and positioning of objects in animations.

Highlights

• 🔄 Origin is the point from which all transformations take place in an animation.
• 🧊 Freeze mode allows us to move the origin and control the effects of transformations.
• 🔀 Changing the origin can be useful for controlling deformation and rotation in animations.
• 🌑 Positioning of an object is determined by measuring the distance from its origin to its parent’s origin.
• 📏 Redefining the origin can affect the position of objects in an animation.
• 📐 Adding a root group to characters and objects helps maintain control over their scale in animations.

3.9 Clipping

Summary

Clipping allows us to mask or trim elements with others.

Clipping can be used to create cool effects and three-dimensional looks.

Clipping works by selecting a shape or group to act as a mask for another element.

Highlights

• 🖌️ Clipping can be used to create some pretty cool effects.
• 🎭 Clipping can make designs look more three-dimensional.
• ⬛ Clipping works by selecting a shape or group as a mask for another element.

Bullet Points

• 🎨 Clipping allows us to mask or trim elements with others.
• ✂️ Clipping can be used to create cool effects and three-dimensional looks.
• 🔍 Clipping works by selecting a shape or group to act as a mask for another element.
• 🌈 The opacity of the clipping path can be adjusted to control visibility.
• 🖼️ Clipping works differently for strokes compared to shapes.
• 📐 Clipping can be applied to groups to mask multiple elements together.
• 👓 Clipping can be used to create interesting designs, such as binoculars.

3.10 Rulers and Guides

Summary

This video explains how to activate rulers and guides in Rive.

Rulers can be activated from the view options menu or using shortcuts.

Guides can be created by clicking on the rulers and dragging.

They can be repositioned, snapped to objects, and objects can be snapped to guides.

Guides can also be locked and removed. Rulers can be removed from the view options menu.

Highlights

• 📏 Rulers and guides can be activated from the view options menu or using shortcuts.
• 🖱️ Guides can be created by clicking on the rulers and dragging.
• 🧩 Guides can be snapped to objects and objects can be snapped to guides.
• 🔒 Guides can be locked to prevent accidental movement.
• ❌ Guides can be removed by dragging them back to the ruler.
• 🗑️ All guides can be cleared at once using the clear guides button.
• 📏 Rulers can be removed from the view options menu.

3.11 Align tools

Summary

In this video, the Align tools in Rive are discussed.

The Align tools include edge line tools, center align tools, and distribution tools.

The functionality of the Align tools changes when multiple objects are selected.

A practical example is shown using the Align and distribution options to create artwork.

Highlights

• 📏 The Align tools in Rive can be found in the inspector when an object is selected.
• 🖇️ The Align tools include edge line tools and center align tools.
• 🌟 The functionality of the Align tools changes when multiple objects are selected.
• 🧩 Use the Align tools to align objects to each other or to the artboard.
• 📐 The distribution tools can be used to clean up gaps between objects.
• 🎨 Practical examples demonstrate how to use the Align and distribution options to create artwork.
• 💡 The Align tools in Rive are useful for precise alignment and distribution of objects.

3.12 Assets Panel

Summary

In this tutorial, we learn about the Assets Panel in Rive and how to import files into it.

We also explore the options for ordering the imported assets and a useful shortcut to switch between the Assets Panel and Hierarchy.

Highlights

• 📂 The Assets Panel in Rive is used to import foreign files.
• 🖼️ Imported files can be ordered by inclusion or alphabetically.
• ⌨️ Use the shortcut (Command 1 or Control 1) to switch between the Assets Panel and Hierarchy, saving time.

3.13 Importing vector artwork

Summary

In this video, we learn how to import vector artwork into Rive using the SVG file type. The assets panel is used to import files, either by clicking the plus button or dragging and dropping. The imported artwork can then be placed on the artboard and edited as desired.

Highlights

• 💡 Rive supports importing vector artwork using the SVG file type.
• 💻 The assets panel in Rive allows easy importing of files.
• 🖼️ Artwork can be dragged and dropped onto the artboard for placement.
• 🗑️ Assets can be removed from the assets panel by selecting and deleting them.
• 🎨 Imported elements can be edited, such as changing colors or modifying vertex points.
• 📐 It is recommended to clean up the SVG file by removing excess vertex points for optimized work in Rive.

3.14 Importing raster artwork

Summary

• Rive allows the import of raster artwork in formats such as PNG, PSD, and JPEG.
• Images can be imported using the assets panel and can be positioned, scaled, and rotated like any other object in Rive.
• Raster images can have transparent backgrounds, allowing for easy background color changes.
• The compression of raster images can be adjusted to reduce file size.
• Images imported into Rive are directly tied to the assets panel and cannot be deleted without removing them from the canvas.
• Images can be replaced or updated using the options in the assets panel or by right-clicking on the image.
• PSD files, being multi-layered, allow for individual manipulation of different layers, making them useful for character animation and separating parts.

Highlights

• 📥 Rive allows easy import of raster artwork in formats like PNG, PSD, and JPEG.
• 🖼️ Imported images can be positioned, scaled, and rotated, and their backgrounds can be changed.
• 💾 Adjusting compression can reduce the file size of raster images.
• 🔄 Images can be replaced or updated with ease.
• 🎨 PSD files offer the flexibility to manipulate individual layers for character animation and part separation.

4.0 Animating in Rive Intro

Summary

This block of Rive focuses on animation. It covers topics such as setting keys, motion paths, the graph editor, classic exercises, solos, draw rules, export options, resources for learning animation, and new features like quantizing and follow path.

Highlights

• 🎬 Learn about animation timeline and setting keys
• 📈 Explore motion paths and the graph editor
• 🏓 Practice classic exercises like the pendulum and bouncing ball
• 🎭 Create traditional animations using solos
• 🎨 Understand draw rules for animation
• 💼 Discover various export options
• 📚 Access helpful resources and links for learning animation

4.1 Timeline

Summary

In order to create animations in Rive, we need to use the timeline.

To access the timeline, we need to go to animate mode.

In animate mode, we can select an animation and the timeline will be displayed.

The timeline is where we create our animations.

Highlights

• 🕒 The timeline is accessed in animate mode.
• 🎬 The timeline is where animations are created.
• ▶️ You can play and pause animations using the play button or the space bar.
• ⏩ You can move the playhead forward and backward using shortcuts or by clicking and dragging.
• 🔄 Different types of animations can be created, including one-shot, loop, and ping pong.
• 📊 The timeline options allow you to change the duration, zoom level, and playback speed.
• ⏏️ The playback speed can be adjusted to play animations faster or slower, or even in reverse.

4.2 Keys

Summary

This video explains how to create animations in Rive using keyframes.

It demonstrates different ways to set keys, manipulate objects on the stage, and create movement.

It also covers copying and pasting keys, timeline shortcuts, and resizing animations.

Highlights

• 💎 Keys can be set by selecting an object and using the inspector or manipulating the object on the stage.
• 💡 Multiple properties can be animated simultaneously by setting keys for each property.
• ⏩ Keys can be moved on the timeline by marquee selecting and dragging them.
• 🔄 Keys can be copied and pasted to create looping animations.
• ⌨️ Timeline shortcuts, such as comma and period, can be used to navigate between keys.
• ⏪⏩ Keys can be moved using the ALT key and comma/period shortcuts.
• 📏 Keys can be resized by selecting them and holding ALT, allowing for adjustments in timing and animation direction.

4.3 Motion Path

Summary

Motion paths in Rive are visual guides that show how objects move based on set keys.

They can be seen by selecting the object on the timeline.

Highlights

• 🎯 Motion paths are visual guides for object movement.
• 📊 Dots on the line represent frames and spacing between movement.
• 🔄 Motion paths update when keys are changed.
• ▶️ Motion paths disappear during animation playback, but can be kept visible by unchecking “show final playback” in the view options menu.
• ❌ “Show final playback” is toggled on by default and hides bones, groups, and motion paths during animation playback.
• ✅ Toggling “show final playback” off allows a clean artboard view with only the artwork.

4.4 Interpolation panel

Summary

This video explains how to customize motion using the interpolation panel in Rive.

The panel is located to the right of the timeline and allows for adjusting interpolation types and curves between keys.

Highlights

• 📊 The interpolation panel customizes motion in Rive.
• ⏩ Interpolation types include linear, hold, and cubic.
• 📈 The interpolation graph represents how properties change over time.
• 🎢 Cubic interpolation allows for acceleration and deceleration.
• 🔄 Interpolation curves can be adjusted using handles for different motion effects.
• 🖱️ Interpolation can be set for multiple keys at once or copied from one key to another.
• ⚙️ Interpolation can be set independently for different properties of an object.

4.5 Work Area

Summary

This tutorial explains how to use the work area feature in Rive to define the playback area of an animation.

It also demonstrates how to create better loops by offsetting keys.

Highlights

• 🎬 The work area feature allows us to define the playback area of an animation.
• 🔄 Offset keys to create more interesting motion and avoid boring animations.
• 📊 Adjust the work area duration and position to focus on specific parts of the animation.
• 🔄 Copy and paste keys to create seamless loops.
• 🎚️ Adjust the offset while the animation is playing to fine-tune the motion.
• 🔄 Make sure keys don’t end at the same time for smoother looping animations.

4.6 Graph Editor

Summary

The graph editor in Rive allows users to visualize and manipulate interpolation curves for animation.

It provides an alternative view to the timeline and helps in understanding how interpolation flows between keyframes.

Highlights

• 📊 The graph editor shows interpolation curves and plotted keyframes for selected properties.
• 🔄 Interpolation types (such as linear and cubic) can be visualized and modified in the graph editor.
• 🖱️ Keyframes can be added or adjusted by dragging objects, using numerical values, or by clicking on the interpolation curve.
• 🔀 Multiple properties can be viewed and edited simultaneously in the graph editor.
• 🤏 Handles in the cubic interpolation mode allow for direct control over interpolation curves.
• 📈 The graph editor is particularly useful for complex animations and character animations.
• ⭐️ It helps ensure smooth and accurate motion by visualizing and adjusting interpolation curves between keyframes.

4.7 Exercise: The pendulum

Summary

In this exercise, we learn how to create a pendulum animation from scratch using Rive.

Highlights

• 🔄 We create a pendulum animation from scratch using Rive.
• 🎨 We use the oval tool and pen tool to create the pendulum and the swinging stick.
• 👥 We group the stick and the ball to create a rig.
• 🔄 We adjust the rotation point to make the pendulum swing correctly.
• 🌱 We create a root group to ensure object changes won’t affect the animation.
• ▶️ We set the rotation keys and adjust the interpolation to create a realistic swinging motion.
• 🔄 We can make adjustments to the root group without affecting the animation.

4.8 Exercise: The bouncing ball: Animating Position

Summary

This tutorial teaches how to animate a bouncing ball using Rive.

It covers creating a group for the ball, setting keyframes for the ball’s position, adding interpolation to create a realistic bounce, and adjusting timing between keys.

Highlights

• 🎥 Tutorial on animating a bouncing ball using Rive.
• 🏀 Importance of creating a root group and changing the ball’s origin.
• ⏱️ Setting keyframes for the ball’s topmost and down positions.
• 🔄 Adding interpolation for smooth motion and adjusting curve handles.
• 🎯 Fixing the ball’s contact with the ground by adding an additional key.
• ⏰ Adjusting timing between keys to change the speed of the bounce.

4.9 Exercise: The bouncing ball: Adding Squash and Stretch

Summary

In this video, we learn how to add squash and stretch to the bouncing ball animation using scale keys.

We also fix the timing of the squash and adjust the interpolation to improve the overall motion.

Highlights

• 💥 Squash and stretch adds an organic look to the ball animation.
• 🎯 Setting the origin of the ball group correctly is important for making changes from the right location.
• 📐 Adjusting the scale by 20 in both directions helps maintain the overall volume of the ball.
• 🔄 Fixing the interpolation ensures that the squash happens when the ball comes in contact with the ground.
• ⏩ Stretching the ball vertically adds a sense of speed to the animation.
• 📈 Matching the interpolation curves improves the overall motion.
• 🔄 Returning the scale back to 100% after the squash and stretch ensures a smooth animation.

4.10 Animating vertices

Summary

Learn how to animate vertices in Rive.

You can move, rotate, and adjust handles to create different curves.

Highlights

• 🔄 Animating vertices allows for flexible shape transformations.
• 🔑 Keyframe animatable properties for each vertex.
• 🔄 Create loops by copying and pasting keys.
• 🔄 Change interpolation type to cubic for smoother movement.
• 🔑 Use “key all vertices” option to key all properties for all vertices.
• 🗑️ Delete unnecessary keys to optimize file size.
• 🔄 Add keys anywhere on the timeline to continue animating.

4.11 Solos

Summary

This video tutorial explains how to use solos in Rive.

Solos are similar to groups, but they allow you to toggle the visibility of nested objects.

Solos can be created using the solo tool or the shortcut key “L”.

They appear in the hierarchy and can be animated.

Highlights

• 🔍 Solos are like groups, but they control the visibility of nested objects.
• 🖱️ Solo tool or “L” key can be used to create solos.
• 📊 Solos appear in the hierarchy and have radial buttons for selecting visible objects.
• 🎨 Solos can be used to animate frame by frame animations.
• 🗝️ Keys are generated for each object in a solo during animation.
• ➕ Objects can be added to a solo by dragging and dropping or using the shortcut “Ctrl/Command + L”.
• ➖ Objects can be removed from a solo by dragging them outside or using Marquee selection.

4.12 Exercise: Using solos for a frame to frame animation

Summary

This tutorial demonstrates how to use solos for a frame-by-frame animation using SVGs.

Highlights

• 🔥 Import a sequence of SVGs or PNGs for the animation.
• 📁 Sort the sequence alphabetically for easy organization.
• 💡 Wrap the sequence into a solo for better control.
• 🔄 Fix the draw order problem by moving the group to the top.
• ▶️ Set a key every two frames to create the animation.
• ✔️ Play the animation and make necessary adjustments.

4.13 Draw Order

Summary

This tutorial explains how to control the draw order of objects in Rive, both in design mode and during animation.

It demonstrates how to create custom draw rules to make objects appear below or above specific targets.

Highlights

• 🎨 Objects at the top of the hierarchy are rendered in front of objects at the bottom.
• 🔄 Custom draw rules allow for animating the draw order.
• 🔑 Keys can be set to switch between normal draw rules and custom draw rules.
• 📊 Multiple custom draw rules can be added.
• 🖼️ Draw rules can be applied to individual shapes or groups.
• ⬇️ Custom draw rules can make an object appear below a specific target.
• 🎭 Custom draw rules create looping animations.

4.14 Exercise: animating with Draw Order

Summary

In this video tutorial, the instructor demonstrates how to animate with draw order using the Rive animation software.

The tutorial covers creating a planet and a moon, grouping the objects, setting up a root group, and creating a custom draw rule to place the moon behind the planet during the animation.

The tutorial also includes animating the X position of the moon and adding scale keys for a 3D effect.

Highlights

• 🌍 Building a moon that orbits around a planet using custom draw rules.
• 🎨 Creating a planet and decorating it with stripes.
• 🌜 Making a moon by creating a smaller ellipse and adding craters.
• 🔢 Grouping the planet and moon into separate groups.
• 🌀 Setting up a root group for easy control of the entire composition.
• 🔁 Creating a custom draw rule to place the moon behind the planet during the animation.
• 📏 Animating the X position and scale of the moon for a 3D effect.

4.15 Export options in Rive

Highlights

• 💾 Rive offers various export options, including .Riv and .Rev file formats.
• 🔗 Share links allow for easy sharing on websites and social media.
• 🎥 Export animations as video files, image sequences, or animated GIFs.
• ⚙️ Customize the export process with options for file format, frame rate, duration, and size.
• 📦 Batch export multiple animations and download them once the export is complete.

4.16 How to get started with animation

Summary

This video provides resources and tips for getting started with animation, even if you have no prior knowledge.

It recommends books like the Animator Survival Kit and the Character Animation Crash Course, as well as free YouTube playlists.

The Rive Community is also suggested as a helpful resource for learning and practicing animation.

Highlights

• 📘 The Animator Survival Kit and Character Animation Crash Course are recommended resources for learning animation.
• 🎥 YouTube playlists, such as Animation for Anyone and 12 Principles of Animation, offer free learning opportunities.
• 🌐 The Rive Community provides resources for learning animation Rigs and interactivity.
• 📚 Practice is key to improving animation skills. Experiment with simple shapes and gradually increase complexity.
• 💡 Experienced animators are encouraged to share their recommendations in the comments.

4.17 Quantize

Summary

Quantize explains how to use the quantize option in Rive to limit the number of frames per second in animations, giving them a more traditional look.

Highlights

• ⏲️ Quantize allows us to limit the frames per second in animations.
• ⏭️ Lowering the frame rate to 24 or 12 frames per second creates a more traditional animation style.
• 🎞️ Quantize drastically affects the playback speed and fluidity of the animation.
• 🔄 Activating quantize changes the number of frames displayed per second.
• 💡 Dropping the frame rate to 6 frames per second results in the animation changing position only six times.
• 🎨 Quantize provides a great way to make animations look more traditional.

5.0 Text

Summary

Foreign users can now create rich animated text and control it dynamically at runtime using Rive’s text engine.

This feature allows for easy localization of graphics and supports variable fonts for animating various font attributes.

Text modifiers enable non-destructive animation of individual characters, words, and lines.

Rive text opens up possibilities for functional UI components, buttons, broadcast graphics, game menus, heads up displays, diagrams, car UIs, and more.

Highlights

• 💬 Rive’s text engine allows for dynamic creation and control of rich animated text in multiple languages.
• 👥 Text localization is made easy with Rive, allowing for graphics to be easily adapted for different languages.
• 🎨 Variable fonts can be animated in various ways, including weight, slant, width, and optical size.
• 🔡 Text modifiers enable non-destructive animation of single characters, words, and lines.
• 🌍 Rive text offers a wide range of use cases, including functional UI components, broadcast graphics, game menus, and car UIs.
• 🚀 Join the Rive Discord community to share your work, seek help, and stay updated on the latest feature releases.

5.1 Text tool

Summary

In this video, we learn about the text tool in Rive.

We can create text fields by clicking on the artboard or using the T shortcut.

The text box has various properties like position, scale, rotation, and size.

We can also change the origin and alignment of the text box.

There are three options to control the size of the text box, and we can choose the overflow behavior of the text.

Highlights

• 💬 The text tool allows us to create and edit text fields easily.
• 📏 We can adjust the position, scale, rotation, and size of the text box.
• 🔄 The origin and alignment of the text box can be customized.
• 📐 There are three options to control the size of the text box.
• 🔡 We can choose the overflow behavior of the text.
• 🎥 Most properties of the text box can be animated on the timeline.
• 📝 The text tool in Rive offers many possibilities for creating interesting animations.

5.2 Text Runs

Summary

This tutorial explains how to use text runs in Rive to apply different styles or modifiers to specific sections of text.

It also demonstrates how to manage text runs and access them at runtime.

Highlights

• 📝 Text runs allow for applying different styles or modifiers to specific sections of text.
• 🖌️ To create a text run, select the desired text and use the “Run from selection” option.
• 🎨 Text runs can be used to change the color or other style properties of specific text sections.
• ✏️ Text values within a run can be changed and even animated.
• 🔄 Text runs can be accessed at runtime to dynamically change the text value.
• 🗑️ Text runs can be edited, merged with other runs, or deleted.
• 💅 The style of a text run can be modified using the style dropdown.

5.3 Text Styles

Summary

In this video, we learn about text styles in Rive.

Highlights

• 🎨 We can apply different styles to text, including font, font size, line height, and text color.
• ➕ We can add multiple fills or strokes to text.
• 🔢 Variable fonts allow us to change properties like width or slant.
• ✂️ We can create, delete, copy, and paste styles.
• 🔄 To apply styles to different parts of the text, we need to break it into text runs.
• 🎚️ Changes made in the inspector are reflected in the style.
• 🎥 Many style properties are animatable.

5.4 Text Modifiers

Summary

The tutorial discusses text modifiers in Rive, which allow for animation of text runs.

Aspects such as adding and adjusting modifiers, modifying various properties such as opacity, origin, position, rotation, and scale, alongside adjusting the range, offset, and falloff are discussed.

Additionally, the video looks at animating opacity, changing the mode, affecting strength, adjusting modifier view, and applying modifiers to specific runs.

Highlights

• 📝 Discusses how text modifiers can be added and adjusted in Rive to animate text runs.
• 🍥 Explains the variety of properties (opacity, origin, position, rotation, and scale) accessible to modify in Rive using text modifiers.
• 🎛 Details how the range of a text run can be adjusted, influencing how much of the run is affected by the modifier.
• 🌑 Guides on how to animate the opacity of text runs, enabling manipulation of text visibility. Also mentions the use of the ‘invert’ feature to switch opacity levels.
• 💡 Discusses the ability to alter the mode, affecting how overlapping ranges interact, as well as the strength of a text modifier.
• 👀 Examines how to adjust the view of a modifier, apply it to specific text runs, and optionally hide modifier range for streamlined view.
• 🎭 Explores options to animate different text properties while in animate mode, including position, weight, and selected range values.

5.5 Text Pendulum

Summary

This tutorial teaches how to animate text runs with their own modifiers.

Highlights

• 🖌️ Create text using the text tool or T shortcut.
• 💡 Change origin to center of text block.
• 🔤 Style the text by increasing font size and weight.
• 🔀 Break text into separate runs.
• 🔄 Create position and scale modifiers for each run.
• 🎬 Nest the text object into a group for easy editing.
• ⏩ Animate the position and scale of each run in the timeline.

5.6 Text Wave Effect

Summary

This tutorial explains how to create a wave effect using text modifiers in Rive.

Highlights

• 🌊 Use text modifiers in Rive to create a wave effect.
• 📐 Adjust the position and scale properties of the text to achieve the desired effect.
• 📈 Set the range and fall off to create a smooth wave effect.
• ⏳ Extend the timeline duration and use the work area to create looping animation.
• 🔄 Duplicate the range and offset keys to make the wave effect continuous.
• 🚫 Fix any glitches by using the hold interpolation option.

5.7 Typing Animation

Summary

In this tutorial, the author demonstrates how to create a typing animation.

The animation involves animating the text value in a text run on a computer screen.

Highlights

• 💻 Create a computer screen with a dark green color and a radial gradient.
• 📏 Add computer lines or a frame to the screen for additional details.
• 🖋️ Add text to the screen and style it with a sci-fi font and bright green color.
• 🖱️ Create a cursor using a rectangle and match its color to the text.
• ⏩ Work backwards when animating the text and cursor, keying in the letters and cursor position.
• ✨ Use hold interpolation for the cursor’s movement and create blinking effect with opacity keys.
• 🔁 Loop the animation and preview the final result.

6.0 Rigging Intro

Summary

This section covers the basics of rigging tools, including bones, joysticks, and constraints.

Highlights

• 💀 Bones are used to create rigs for Graphics.
• 🕹️ Joysticks will be discussed as a rigging tool.
• 🧩 Constraints will be covered in detail.

6.1 Bones Overview

Summary

The bone tool in Rive allows you to create a skeleton for your graphics, enabling you to animate multiple connected parts.

You can create a chain of bones by clicking on your artboard, and each additional bone added becomes a child of the previous bone.

There are two types of bones: root bones and child bones.

Joints help set up and orient the bones, and you can create hierarchical relationships between bone chains.

Highlights

• 💀 The bone tool in Rive allows you to create a skeleton for your graphics.
• 🖱️ Clicking on the artboard creates a chain of bones, with each additional bone being a child of the previous bone.
• 🧩 Joints are controls that help set up and orient the bones.
• 🔄 Rotating a bone changes both its rotation and length.
• 📐 Root bones have a position property, while child bones do not.
• 🤝 Hierarchical relationships can be created between bone chains.
• 🎨 Artwork can be connected to bones to deform vector and raster images.

6.2 Bones with hierarchical connections

Summary

This video discusses the use of hierarchical connections in Rive.

Hierarchical connections allow for the attachment of artwork to bones, enabling changes in the bone to be inherited by the artwork.

Highlights

• 💀 Hierarchical connections can be used to attach artwork to bones in Rive.
• 🔄 Changes made to the bone, such as rotation, movement, or scaling, will be inherited by the attached artwork.
• 🚀 Hierarchical connections are more performant than binding and weighting in terms of file efficiency.
• 💪 Hierarchical connections can be used to create realistic movement, such as rotating and adjusting an arm.
• 🛡️ Artwork that does not deform, like a shield, can be attached to bones using hierarchical connections.
• 🎨 Hierarchical connections work the same for both vector artwork and raster images.

6.3 Binding and Weighting bones

Summary

In this video, we learn about binding and weighting bones in Rive.

Binding allows us to connect bones to a path layer, while weighting determines the influence of each bone on individual vertices.

Highlights

• 🔗 Binding bones to a path layer allows us to manipulate the vertices of a path using different bones.
• 📊 Weighting vertices determines how much influence each bone has over them.
• 👥 Selecting multiple bones requires holding the shift key while clicking.
• 🔄 Rotating bones only affects the vertices that are influenced by them.
• 📏 Weighting handles evenly between bones can create smooth curves in vector paths.
• 🎨 Moving bones affects the path layer, not the shape layer, allowing for unique lighting effects with gradients.

6.4 Joysticks

Summary

Joysticks in Rive allow us to create animations by panning through different timelines.

Joysticks can be assigned timelines and inverted if needed.

Highlights

• 🕹️ Joysticks in Rive allow panning through different timelines for animation control.
• 🖱️ Customize the handle, position, size, origin, and draw in world space options.
• 🎯 Use the handle source to control the position of the handle with other objects.
• 🔄 Assign timelines to the joystick for animation control.
• ↕️ Invert the timeline for different motion directions.
• ➕ Multiple joysticks can be added to an artboard.
• ❌ Ensure timelines have non-conflicting keys for smooth motion.

6.5 Constraint Overview

Highlights

• 👥 Discusses the concept of constraints in Rive.
• 🔄 Constraints allow the control of one object’s properties through another’s, including scale, rotation, and position.
• 🛠️ More complex constraints can set up an IK system or enable an object to follow a certain path.
• 🛑 Some constraints can limit an object’s properties.
• 🌐 The combination of constraints and interactivity can create a plethora of interesting effects.
• 📚 Covers future topics, promising further discourse on interactivity in constraints.

6.6 Translation Constraint

Summary

The content discusses the use of the translation constraint feature in the software Rive.

Translation constraints allow users to link the position properties of two different objects.

The video further explains how different properties of this constraint can be customized such as copying only specific axis positions, setting a range for copied values, toggling the constraint on and off, setting its strength, and animating its properties.

Highlights

• 📍 Translation constraints in Rive allow the positioning properties of a certain object to be linked with another.
• 🔵 Allows a blue circle’s properties to mimic those of a red rectangle by adding a translation constraint.
• 📏 Users can set a defined range for the copied values using the minimum and maximum options.
• 👁️ The constraint’s activity can be controlled by toggling on or off using an indicator in the constraints panel.
• 💪 The strength of the constraints can be adjusted and even animated to produce different effects.
• ❌ Constraints can easily be removed when they’re not necessary anymore.
• 📐 The same technique can be used for other constraints as well, such as limiting the scale or rotation of the object.

6.7 Scale Constraint

Summary

The transcript outlines a tutorial on how to use Rive’s scale constraint feature, detailing its similarities to the translation constraint.

The video discusses how to apply a constraint from the red square to the blue square, allowing any changes in size to be duplicated in the blue square.

The presenter goes on to explain various options including the ability to control the strength of the influence the red square has on the blue, and the option to toggle the reference space being calculated and the axis copied.

Highlights

• 🔵 The discussed process involves constraining a blue square to a red square in Rive.
• ➕ The scale constraint feature is considered very similar to the translation constraint feature.
• 🎯 The ‘target’ property is used for setting a target for the constraint, in this case, the Red Square.
• 💪 The ‘strength’ setting allows for customization of the impact that the target has on the owner (blue square).
• 🔄 The ‘offset’ and ‘reference space’ options help in making the calculations.
• 📏 Control over which axis is copied, and setting limits are discussed. A minimum and maximum value can be set.
• 🔄 The presenter explains that if the blue square (constraint owner) is duplicated, the constraint is also duplicated. This duplication also applies to any other objects it’s added to.

6.8 Rotation Constraint

Summary

The tutorial covers the specifics of how to use Rive’s Rotation Constraint feature with instances illustrated on a blue and red square.

The feature allows for the rotation of an object to be constrained by the rotation of another, saving time when trying to animate two similar items.

Highlights

• 🔄 The Rotation Constraint in Rive is introduced, an extension to previously discussed translation and scale constraints.
• 🔵 A blue square is selected to apply a new rotation constraint. The ‘target’ option is set to a red square.
• 🔄 Rotating the red square now causes the blue square to mirror its rotation.
• 🛠️ Additional options such as strength property, source spaces, offset toggle, and Min/Max degree values referenced.
• ➡️ Duplicating the square and moving it still retains the rotation constraints between squares.
• 💪 Adjusting the strength value to 50 halves the influence of the red square’s rotation on a second blue square.
• ⏩ The rotation constraint allows for efficient animations, with multiple objects moving in response to a single input.

6.9 Transform Constraint

Summary

The tutorial explains the concept of Transform Constraint in Rive, which combines the functions of translation, rotation, and scale constraints, allowing control over the position, scale and rotation of an object.

The tutorial elaborates on the process of setting up the transform constraint, gives a demonstration of how it functions, and provides a glance at its properties.

Highlights

• 🎯 The tutorial introduces Transform Constraint in Rive, a generalized constraint that combines translation, rotation, and scale constraints.
• 🔧 To set up this constraint, the user needs to select an object (blue square in the tutorial), add a new constraint and then select the transform constraint.
• 📦 The Transform Constraint allows users to control not only the position but also the scale and rotation of the selected object.
• 🎩 The panel then requires users to select a target, where ‘red square’ was used as the target in this demonstration.
• 🔄 The Blue Square snaps to the location of the Red Square upon selection, and subsequent actions(moving, rotating, scaling) performed on the Red Square reflects on the Blue Square too.
• 💠 The properties menu of the Transform Constraint includes properties like strength setting, target, transform spaces, and X and Y origins suitable for text fields, etc.
• ⏭️ The tutorial hints at the utilization of X and Y origins in text fields to be covered in a later lesson.

6.10 Transform Constraints with Text Fields

Summary

The video tutorial gives a step-by-step guide on how to add a dynamic and resizable background to a text box in Rive.

The video covers creating a custom shape, adding bones to the shape, grouping bones and adding transform constraints to them.

Highlights

• 🎨 The host first demonstrated how to add a text box and a rectangle shape, which is given a magenta color.
• 👥 Next, the rectangle shape is turned into a custom shape and “bones” are added to its corners.
• 🔗 The host then bound these vertices of the custom shape to the bones and ensured the appropriate weighting to each corner.
• 📏 Transform constraints were added to the bones, adjusting its origin percentages to match each corner of the text box.
• 🔄 If needed, padding to the button can be added by removing these transform constraints and grouping each bone before applying the transform constraint to the group.
• 🎚 Adjusting the X and Y position of the bones allows for the adjustment of padding.
• 🌈 The host then showcased how to add visual elements like color, stroke, fills including gradients, and corner radius to the shape.
• 🔄 The final result showed a text box whose background resizes when the text content is altered, demonstrating the dynamic feature unveiled in Rive.

6.11 Distance Constraint

Summary

The content focuses on the three different modes of the distance constraint feature in the Rive animation software — closer, further and exact.

These modes allow the user to establish maximum, minimum or exact distances between two objects in an animation.

Each mode also influences how the constrained object moves in relation to the target object.

Highlights

• 🔵 Adding a distance constraint to the blue circle, with the red ellipse used as the target in the Rive software.
• 🎯 Discussion on the visual aid provided by a red circle indicating the distance between the two objects.
• 🔄 Understanding the ‘Closer’ mode which enables the blue ellipse to move closer to the red one without getting further.
• 🔁 Explanation of the ‘Further’ mode that allows the blue ellipse to move away from the red one without getting closer.
• 🎯 The ‘Exact’ mode enables the blue ellipse to maintain a fixed distance from the red one.
• 🔄 Demonstrating movement of the red ellipse, which drags the constrained blue ellipse along with it in the ‘Exact’ mode.
• 👁️ Suggestion of how the distance constraint feature could be used in character animation, for instance, keeping a character’s pupil inside the eye.

6.12 IK Constraint

Summary

The tutorial explains how to set up and use the IK (Inverse Kinematics) Constraint in Rive, a software tool that helps designers to create animated characters.

This process involves creating a target and a group, selecting the last bone in the chain, and choosing the IK Constraint from the new constraint option.

It also discusses the various properties available and how animators can use different techniques to animate with both forward and inverse kinematics.

Highlights

• 🦴 The IK stands for Inverse Kinematics, which changes the rotation of an entire bone chain based on the movement of a specific point.
• 🎯 A target needs to be created to serve as the point for bone movement.
• 🛠 The last bone in the chain should be selected to create the IK constraint.
• ⚙ The target can be selected from the group created, and it should be moved according to the desired rotation for the bone chain.
• 🔧 The properties available include the strength, target, and bone count which can be adjusted as per the animation requirements.
• 👣 The target can be visualized as a leg, and its movement will affect the rotation of both bones.
• 💫 In the animate mode, actions can be created by toggling the ‘invert direction’, which allows bones to rotate in the opposite direction.
• 🔄 The flexibility to animate between forward and inverse kinematics is provided through keyable and animatable properties.

6.13 Follow Path Constraint

Summary

The tutorial explains how to use Rive’s ‘follow path constraint’ tool, demonstrating different creative uses.

The tool allows animation objects to follow paths and offers various customization options.

Highlights

• 🏹 Demonstrated how to make an object (e.g., an arrow) to follow a path (e.g., an ellipse) using ‘follow path’ constraint tool in Rive.
• 🎯 The tutorial detailed the importance of the object’s origin, which is what follows the path; noting this can be changed to different parts of the object.
• 💡 Explored how adjusting the ‘distance percent’ causes the shape to move along the path and how this is linked to the starting vertex.
• ⭕ Discussed the ‘orient’ option which allows the object to auto-orientate to follow the path or to maintain its own rotation.
• 🖼️ Showed the process for open paths and the animation options offered, including the ability to animate multiple properties such as strength, orientation, and distance.
• 🛤️ Demonstrated that multiple objects can follow the same path, each with individual animation characteristics.
• 👣 Explained that if multiple paths exist on one shape layer, the object will jump from path to path based on the hierarchy order within Rive.

6.14 Negative Strength on a Constraint

Summary

Rive tutorial explaining how to use negative strength values for constraints in order to create inverse motion, covering examples with translation, scale, and rotation constraints.

Highlights

• 💡 Highlights the possibility to use negative strength values for constraints in Rive.
• 🎯 Demonstrates adding a translation constraint to a blue square and setting the strength to -100, targeting a red square.
• ⬆️⬇️ Shows that this allows the blue square to move in the opposite direction to the red square, both on the x-axis and y-axis.
• 🚪 Suggests this technique could be used for creating a door that requires only one control to open.
• 🔍 Explains how adding a scale constraint to the blue square and setting it to -100 causes it to scale inversely to the red square.
• 🔄 Gives an example of adding a rotation constraint to the blue square, again set to -100, which causes it to rotate in the opposite direction to the red square.
• 🎉 Concludes that using negative values for constraints opens up many possibilities for rigging and can be used for any type of constraint.

7.1 State Machine Overview

Summary

This transcript presents an overview of the state machine concept in Rive with effects and functions highlighted.

Highlights

• 👉 State machine provides interactivity to Rive files and it can be accessed via the animate mode.
• 📂 By default, there’s a state machine and a timeline in the animations list.
• 🎬 The play button triggers the first animation attached to the starting state.
• ➡️ The initial state is determined by the entry state and then follows the path created by connecting lines.
• 📍 States can be moved, aligned and deleted as required, with an undo function also available.
• 🔀 The graph view can be panned and zoomed in and out for ease of use.
• 👨💻 Understanding of the basics paves the way for more advanced tasks of creating interactions in future lessons.

7.2 Single Animation States

Summary

This video tutorial discusses the concept of single animation states in Rive, explaining how different playback settings (one-shot, loop, ping-pong) can change the behavior of animations.

The video also covers how to create new timelines, animate elements, change state machines, adjust speed settings, and play animations in reverse.

Highlights

• 🎥 The video begins with an explanation of how single animation states play single timelines in Rive, evidenced by moving a red square from left to right. It also shows how playback is set to ‘one-shot’, so it ends after one play.
• 🔁 The demo then changes the play option to ‘Loop’, which repeats the animation continuously. Changing the play option to ‘Pingpong’ makes the animation play forward then in reverse, repeatedly.
• 🆕 The tutorial proceeds with creating a new timeline — this time, animating a blue square from left to right.
• 💡 Going back to the state machine changes the state of the animation. The tutorial shows how to change the animation being played by selecting the current state and changing the animation in the dropdown list.
• ➕ The video explains another way to add a state to the machine — by dragging & dropping it onto the graph. Removing states is also demonstrated.
• 🔄 The tutorial clarifies the importance of hooking the entry state to the chosen timeline. To create a transition, simply drag it onto another state.
• 🎯 The final part of the video discusses the last way to add a state — by right-clicking anywhere on the graph and choosing ‘Add State’. It emphasizes the need for an associated animation, and demonstrates how to adjust the speed at which an animation plays.
• ⏭️ The video ends by showing how to play the animation in reverse by inputting negative values in the speed settings.

7.3 Layers

Summary

This part of the Rive tutorial discusses the use of layers in the state machine to play multiple animations simultaneously.

The video demonstrates how to rename these layers, how to move elements between them, and how these layers interact within the state machine.

They also discuss the versatile uses for these layers, such as splitting up parts of your animation onto different layers in the state machine.

Highlights

• 🎬 Explained how to add and replace timelines on the state machine and to play multiple timelines simultaneously.
• 🔲 Created animations for Red square and Blue square to move back and forth on different layers.
• 🖌️ Demonstrated renaming of the single default layer e.g. renaming “Layer One” to “Red Square”.
• ➕ Showed how to add an additional layer using the plus button and renaming the new layer (e.g. “Layer Two” to “Blue Square”).
• 🔄 Demonstrated transitions between layers and how animations in different layers can run simultaneously.
• 📊 Discussed diverse uses of layers in the state machine, such as splitting parts of an animation onto different layers.
• 🧩 Used multiple layers to mix different aspects of animation together demonstrating how they can complement each other when running simultaneously.

7.4 Layers and Mixing

Summary

This lesson discusses the use of layers and the concept of animation mixing in Rive’s state machine.

Through practical demonstration, it shows how different timelines can be layered for complex animation effects by animating different properties of an object (a rectangle in this case).

Highlights

• 📐 The tutorial shows how to use different timeline animations called ‘move’, ‘scale’, and ‘rotate’ to animate a rectangle in different ways.
• ⏱️ Each timeline animates a specific property, which will be essential when mixing the animations later.
• ➕ The first layer contains the ‘move’ animation, which moves the rectangle, and additional layers are added for ‘scale’ and ‘rotate’ animations.
• 🔀 To make the animation work, it’s necessary to create a transition from the entry node to the looping animation.
• ⛔ One can delete the transition to go back to the simple move animation; reattaching the scale transition adds the scaling effect back.
• 🔄 The concept of ‘modular animation’ is introduced, where different properties of an object can be animated on separate layers.
• 🌀 Layering the move, scale, and rotate animations creates a complex 3D rotation effect, demonstrating an effective way to use the state machine for animation creation.

7.5 Layer Order

Summary

This step-by-step tutorial for Rive discusses how the layer order can impact different animations sharing the same properties in the state machine.

Methods to visualize and control this impact are presented through examples.

Highlights

• 💡 The tutorial first introduces the process of defining different positions in two animations named “up” and “down”.
• 🔀 It then examines the effect of changing the animation on a node from “up” to “down” within the state machine.
• ➕ It demonstrates how layer ordering affects the animation if two animations with the same property (Y property in this case) are mixed.
• 🏁 The video shows that the layer to the right takes priority over the layer on the left, which is crucial information for correcting animation inconsistencies.
• 👀 The users are advised to be aware of the layer order if they notice any objects out of place, which could indicate conflicting keys.
• 🔄 Another example in the tutorial involves animations that move a square from left to right and vice versa, highlighting the importance of layer priority in deciding animation direction.
• 🚀 Users are reminded to keep layer priority in mind when building out their state machines for more complex operations.

7.6 Transitions

Summary

The video by Rive covers the usage of transitions to switch from one state to another in creating animations.

The demonstration includes the creation, testing, and customization of transitions, as well as the problems that can arise when creating complex state machines, such as infinite loops, and how to solve them.

Highlights

• ✂️ Creates two different states for transitions, each of these states representing different positions of an animation.
• ↪️ Demonstrates the basic process of creating transitions, utilizing timeline one and timeline two as bases for the movement.
• ▶️ Explains the function of a created transition by playing the state machine.
• 🔁 Develops a more complex state machine by creating a two-way transition, which results in an infinite loop.
• 🛠️ Discusses problem-solving in a case where transitions continuously fire due to the lack of established instructions.
• 🛡️ Introduces the concept of conditions and inputs to prevent infinite loops.
• 🎛️ Demonstrates customization of transitions which includes properties (like duration), conditions, events and interpolation.
• ❌ Shows how to delete unwanted transitions.

7.7 Transitions duration

Summary

The video tutorial provides an in-depth illustration of the transition properties, particularly the duration aspect in Rive, a 2D animation tool.

The speaker explains the process of setting up a state machine, defining the transition between two states, and altering the duration parameter to control the transition time.

Highlights

• 🎬 Details about transition properties within Rive are discussed, starting with defining the duration parameter.
• 🛠️ The setup of a state machine is described with states positioning a rectangle alternatively at left and right positions.
• ⏲️ Duration controls the time it takes for a transition to occur, instantly if set to 0 milliseconds, gradually with increased duration.
• ⚙️ Interpolation between the initial and final positions occurs over the set duration; this value can be modified to alter the speed of transition.
• 🔄 Illustrations of looping animations with transitions from one position to another and back are provided.
• 📐 By adding cubic interpolation to transitions, an ease in and ease out motion can be accomplished.
• 🔄 More complex transitions involving rotation in different directions are also demonstrated.

7.8 Exit Time

Summary

The Rive tutorial examines the function of the exit time property, its application in animation sequences and its interaction with transition durations.

The user creates different animations using exit time settings, illustrating its role in controlling the transition between animations and specifying when each should start and end.

Highlights

• 📝 The tutorial starts with instruction on creating a transition between two timelines using the ‘exit time’ property.
• ⌛ It tries to explain that when exit time is set to 100%, the entire first animation plays before transitioning to the second.
• ↩️ The tutorial further explains how transitions can be looped by creating another transition from the second to the first animation.
• 📑 In a more complex example with three different squares and timelines, each color is given its own transition using exit time to dictate when one animation ends and the other begins.
• 💠 The user demonstrates that tweaking the percent of exit time to 50% will play only half of the animation before transitioning.
• 😐 The tutorial notes that setting duration at zero makes animation switch instantly without transition.
• 🔄 The user combines exit time with duration to achieve smooth transitioning between states, enhancing this with cubic interpolation.

7.9 Pause When Exiting

Summary

The transcript discusses the use of the ‘Pause When Exiting’ transition property, explaining its functions, effects when applied to different timelines, and why it’s important through examples.

Highlights

• 🔁 ‘Pause When Exiting’ is the name of the transition property being discussed in this example, focusing on its effects on two differing timelines.
• ⏭️ Timeline 1 conducts the rotation of a rectangle over a full 360°, with its state set to looping, whereas Timeline 2 is empty, only used to facilitate a transition.
• 🕰️ The exit time is set to 100%, and the transition duration is determined to be 500 milliseconds.
• 🔄 When the state machine is played, it performs a complete 360° turn and then an additional half turn.
• 🕹️ In the transition phase, the state continues to play until about halfway through before it stops.
• ⛔ The ‘Pause When Exiting’ function is then used to stop the state machine from continuing to play this state.
• 🎬 When ‘Pause When Exiting’ is enabled, the animation will only play once and stop during the transition, eliminating the additional half turn.

7.10 Inputs

Summary

The transcript provides detailed instructions on using inputs in the state machine in Rive, a 2D animation software.

It explains how to create various types of inputs, their utility, how to manipulate them, and methods to organize these inputs.

Highlights

• 🔄 Inputs play a crucial role in driving transitions in the state machine, and developers can manipulate these using languages such as JavaScript or Flutter.
• ➕ Inputs can be created using the plus button, including number, Boolean, or trigger types.
• 🔢 Number inputs allow for inputting or manipulating numerical values, positive or negative.
• 🟩🟨 Boolean inputs can return true (when clicked/activated) or false (when unclicked/deactivated) values, useful for conditions.
• ⏱️ The trigger input emits a brief signal to the state machine, similar to a Boolean but holds the value for only a short time.
• 📁 Inputs can be reorganised, deleted, or arranged in folders to facilitate work on larger state machines.
• 🏷️ Both inputs and folders can be renamed for easy identification.

7.11 Conditions

Summary

This session outlines how to create and use inputs as conditions for transitions between different states.

The tutorial demonstrates a rectangle with two pieces of text saying ‘on’ and ‘off.’

The tutorial teaches the viewer how to create an ‘on’ state with full opacity, and an ‘off’ state with zero opacity, using a Boolean.

We also learn how to create inputs involving numbers, and use triggers for state transition.

Highlights

• 🎯 It teaches how to create two different states: ‘on’ (100% opacity) and ‘off’ (0% opacity) with a rectangle as the given example.
• 🔄 The tutorial explains creating a transition between ‘off’ and ‘on’ states and controlling this transition using conditions and Boolean inputs.
• 💡 The Boolean named ‘on’ is created, which, when true, leads to the ‘on’ state and remains in the ‘off’ state when false.
• 🔄 The video instructs on creating a second transition from ‘on’ to ‘off,’ adding another Boolean condition and setting the value to false.
• ⏱️ The tutorial introduces adding duration between two transitions, creating an easing effect.
• 🧮 Instead of using Boolean, the tutorial demonstrates using number inputs to create conditions, with ‘0’ marking ‘off’ and ‘1’ marking ‘on.’
• ➡️ It teaches how to utilize different operators such as equal, not equal, greater, less, etc., for the number inputs.
• 🕹️ Finally, the tutorial guides the viewer on setting up triggers to cause the transitions and create an interactive effect.

7.12 Creating And Or Transitions

Summary

This transcript talks about how to create complex transitions in Rive using multiple conditions.

It explains how to create ‘and’ transitions, where several conditions must be met simultaneously, and ‘or’ transitions, where either one of several conditions need to be met.

Highlights

• 🔨 First, the process of creating ‘and’ transitions is detailed, involving the set up of two input conditions — a Boolean and a number. When these conditions are met, the transition occurs.
• 🔁 The process is demonstrated by playing the state machine. The transition occurs when both conditions are met.
• 🔄 The transcript then moves onto creating ‘or’ transitions, where a new condition is added and can either be the Boolean being true or the number being one.
• 🎯 An additional transition is added that you can use the Boolean. The state machine is then activated, demonstrating the transition can be caused either by the Boolean or the number.
• 🅰️ The ‘or’ transitions are shown to work independently. The transition is activated first by the Boolean, then by the number after resetting.
• 🔍 Through this process, users are shown how to add different types of logic to create more complex transitions in their State machines as required.

7.13 Initial Input values

Summary

The tutorial discusses methods of setting initial input values in the Rive State Machine for various animations based on the specified conditions.

Highlights

• 📚 The tutorial explains how to set initial values on inputs in the Rive State Machine as you continue to create more.
• 🖼️ It uses an example with three different animations tied to a rectangle’s fill color change.
• 🪢 Each animation is added as a node in the state machine, linked to the entry state.
• 🔄 The animation that plays is dependent on the input value before the state machine starts.
• ✔️ The example shows that even if the input value changes during the playback, the initial value is reset once the playback stops.
• 🎛️ The use of Booleans is shown in the example; if a menu is opened or closed before the machine begins, it dictates the state machine’s start.
• 🎬 This lesson emphasizes that the initial input values are essential to determining how a state machine begins its operations.

7.14 Using Listeners to change Inputs

Summary

The article gives a guided walkthrough on using listeners in Rive, detailing how to create, customize, and delete them.

It explains the process of assigning a target and implementing actions like mouse clicks or movements, upclick or down click on a target, and pointer movement within a target area.

This allows users to create interactions such as hover effects and trigger inputs.

Highlights

• 💡Listeners in Rive are essential for creating user interactions such as mouse clicks or movements.
• 🎯 The listeners can be easily customized and assigned to target objects, like different rectangles in this case.
• 🔄 You can set different actions that trigger upon entering or exiting the target area, clicking up or down, and even pointer movement.
• 📥Create a listener for the red rectangle to represent the ‘enter’ action and another to represent the ‘exit’ action.
• 🔧 These listeners can be configured to change Boolean values, creating a hover interaction where the Boolean switches to true when the mouse enters and false when it leaves.
• 📊 The listeners can also manipulate number values, making it possible to specify different outputs depending on the rectangle the pointer enters.
• 🗑️ To delete a listener, right-click and use the delete option or hold the alt button and use the x-button.
• 🖱️ The author ends by setting up a listener for a click action on a blue rectangle, detailing how to monitor its effects through the console.

7.15 Using Listeners to align targets

Summary

This tutorial primarily illustrates the process of using listeners to align targets in Rive, focusing on creating visible elements that align with a cursor, and hiding elements for creation of a hitbox with an align target.

Highlights

• 🎯 Initially, two elements are created, one to receive a listener, and another designed to align with the cursor.
• 🖱️ The process of creating a listener is explored, with the element selected before hitting the plus button to automatically set a target; alternatively, a listener without a target can be created and then clicking on the target button allows selection of the rectangle.
• 🔄 The tutorial outlines how to change inputs to align the target, demonstrating that, when running, while in the square, the blue ellipse is moving along with the mouse, while outside the square the ellipse remains still.
• 🖐️ By choosing the ‘pointer down’ option, the demonstration shows that whenever a click is made inside the rectangle, the ellipse realigns with the target.
• 👀 The aspects of Rive’s function allowing elements to remain hidden are also covered, with an invisible rectangle acting as a hitbox that the align target operates within.
• 🦴 Lastly, the tutorial notes the multiple uses for the align target, one being the potential to use a constraint with bones to create a 3D face rig.

7.16 Any State

Summary

This transcript discusses the workings of the ‘any state’ node in the Rive platform and its application in manipulating shapes and animations based on input numbers or triggers.

It also addresses how to troubleshoot common issues encountered while using the ‘any state’ mechanism.

Highlights

• 🧭 The ‘any state’ node in Rive allows transitions to different states at any time without complex transitioning setups between nodes.
• 🎛 The transitions of states can be controlled and determined by number inputs corresponding to different positions.
• 🔄 This node allows for interpolation, meaning that transitions smoothly move from one state to another by changing the input value.
• 🔄 It also supports cubic interpolation for better looking transitions between positions.
• 💫 In more complex examples, clicking on different elements (stars in this case) triggers different animations without needing a complex web of transitions.
• 🔧 There are common errors encountered in using ‘any state’ tied to Number or Boolean inputs causing repeated transitions. The solution to this issue involves using triggers instead.
• 🅱 Trigger inputs only activate transitions once. Unlike Booleans or numbers, they don’t hold a constant value that can cause multiple, unintended transitions.

7.17 Exit State

Summary

The video tutorial discusses the Exit State, a default state in the state machine of the Rive software tool.

Although this state is rarely used, its understanding is essential.

It is characterized by a red node which, when entered, deactivates the layer it is on.

To illustrate its function, two animations (a red and a blue one) are explained, which play on distinct layers.

When the red layer reaches the Exit State, it deactivates and stops the red animation.

Highlights

• 🟥 The Exit State in Rive is demonstrated using a red node, which when entered, deactivates the layer it’s on.
• 🔄 The tutorial uses two animations for the illustration — a red and a blue one.
• 🚥 The red animation is hooked to the Exit State and stops after playing its entire duration.
• 🔵 The blue animation is a looping animation and continues to run, depicting layer deactivation through the Exit State.
• 🔍 While the Exit State is rarely needed, its understanding is crucial for managing complex animations-oriented projects.
• 💡 Understanding Exit State might be beneficial in performance-focused scenarios where we want to stop certain layers without affecting the others.
• ❔ Most users may not need to use this function regularly, but it’s valuable knowledge for Rive users.

7.18 Common State Machine Issues

Summary

This transcript discussed common errors that might occur when using a state machine for animations, specifically focusing on animations that involve changing states with different scales, colours and opacities.

The main issues revolved around incorrect display of state changes (the ‘on’ and ‘off’ states) due to lack of proper keying in the animation sequences, and showed how to correct them.

Highlights

• 🤔 The first problem described includes a button that doesn’t revert to its original (‘off’) state of being smaller and white after being enlarged and turned green (‘on’ state), despite what the created listeners and inputs suggest.
• 🔎 The issue was traced to improper keying in the timelines, specifically lacking keys in the off animation to dictate its expected properties: size and color.
• 🛠️ The solution suggested is setting appropriate keys for the off animation similar to those in the ‘on’ animation.
• ❗ This was identified as a common mistake made by beginners when building out their first state machines.
• 📝 A second example dealt with three timelines that need to play in succession but fail to display the correct transitions in opacity.
• 🔄 Like the first case, the issue correlated to the absence of necessary keys in sequential timelines prompting squares to appear and disappear correctly.
• 💡 The text emphasized the main point: even if animations look correct individually, problems may arise when they are integrated within a state machine due to unkeyed changes.

7.19 Build a simple button

Summary

This tutorial provides a step-by-step guide on how to create an interactive button using Rive, including how to set up different animations such as idle, click, hover, transition, and Lissener features.

Highlights

• 📘 The tutorial explains how to build an interactive button with Rive that reacts to hovering and clicking.
• 🏠 A ‘housekeeping’ step explains the renaming and removing unnecessary layers for easy understanding.
• 🚥 The button includes two different animations for color changes. These include a ‘non-hovered’ state which keeps the button blue and a ‘hovered’ state which turns the button purple.
• 🖱️ A listener is created to look for the pointer interaction, controlling the transition of the button from blue to purple on hover.
• ⬅️ The state machine is tested to assure that the button correctly transitions from purple back to blue upon exit of the mouse.
• ⏱️ Duration is added to the color transitions for a smooth, aesthetically pleasing effect.
• 💥 A new layer is added for the ‘click’ interaction and the tutorial concludes with the creation of a clicking interaction that initiates a bounce effect.

7.20 Build a double click interaction

Summary

The tutorial demonstrates how to create a double-click interaction in Rive, using an animated heart as an example.

The heart, when double-clicked, appears in a similar way to interactions on social media.

Several steps are explained, such as creating hitboxes and listeners, managing animation states, setting up transitions, and controlling time.

Highlights

• 💡 The tutorial demonstrates how to create a double-click interaction in Rive with an animated heart.
• 🎨 The process starts with designing by creating a large square which will act as a hitbox and gives it a name.
• 🔎 In the animate mode, an input and a listener are added for this square to create a double-click trigger.
• ⏭️ The next step is working with the ‘state machine’ to manage the various states of animations.
• 🔄 A loop is set up to make the interaction repeat continually.
• 🕑 The duration of required double-click is set to 1 second but can be changed according to preference.
• 🖱️ Lastly, the animation is tested to ensure that it reacts accurately to double clicks.

7.21 Build a simple menu

Summary

Rive’s lesson focuses on building a simple interactive menu, guiding users through the process of creating, grouping, and interacting with buttons.

Highlights

• 🖱 The lesson explains the process of creating a simple interactive menu where options light up on mouse over and stay lit when clicked.
• 🚀 Beginning with an overview of the grouping and structure of buttons, made up of rectangles and text objects.
• 🔄 Each button will need two listeners for pointer interactions — one for pointer enter, one for pointer exit.
• 🎨 Adding animations to buttons such that the color shifts when hovered over and clicked.
• 💡 Creation of state machines for the on and off state of each button.
• 🙌 Each button is assigned a number input so that upon selection, the respective number becomes active. This allows the button to remain ‘lit’ post-selection.
• 🏗️ Logic is set for each button to respect ‘hover’ and ‘selection’ states independently; a chosen button remains ‘lit’ even when other buttons are hovered over.

7.22 Exposing Inputs from Nested Artboards

Summary

The video tutorial discusses how to expose inputs from a nested artboard to a parent artboard in Rive, a platform for interactive design.

It further takes through the steps of selecting and nesting child artboard with the parent, exposing inputs to the parent artboard, creating and naming new inputs, as well as showing changes to multiple artboards at once.

Highlights

• 🎥 The tutorial begins with explanation of the setup of parent and child Artboards in Rive.
• 🎚 Demonstrates how to nest the child artboard into the parent artboard using nested artboards option or shortcut.
• ⚙ The art board selected can be moved around anywhere on the parent artboard.
• 🔍 Shows how to select the desired input in child artboard and expose it to the parent artboard.
• 🆕 Walks through the creation of a new input in the child artboard and the importance of naming inputs for later work with listeners.
• 🔄 Discusses the updated changes when multiple instances of nested artboards are on a parent artboard.
• 📑 Emphasizes the good practice of renaming the nested artboards for easier distinction when multiple inputs are exposed.
• ✔ Underlines the convenience and ease of adding and subtracting inputs from a child artboard to a parent artboard in Rive.

7.23 Controlling Exposed Inputs with Listeners

Summary

Controlling Exposed Inputs with Listeners focuses on ways to manipulate the inputs from a nested artboard to a parent artboard using listeners.

Explaining the process, the speaker demonstrates how to create a listener to control a target, named ‘all off’, which changes all nested artboard inputs to ‘off’.

Highlights

• 👥 The tutorial discusses the manipulation of inputs from a nested artboard to a parent artboard using listeners.
• 🏗️ The speaker shows how to continue with a file from a previous video.
• 🎯 A new button called ‘all off’ is used as the target for a listener.
• 🎁 An explanation follows about the creation of listeners and how they manipulate the nested inputs.
• 🔄 The new button is programmed to make sure all child artboards are set to ‘off’.
• 🧪 The speaker tests the function of the button by switching other buttons on and then pressing the ‘all off’ button.
• 🎛️ Clarification of the difference in control between child artboard and parent artboard levels is given.

7.24 Controlling Exposed Inputs with Keys

Summary

In this content, the use of keys to control the inputs of nested artboards is explained.

Different inputs such as a number, Boolean and a trigger are demonstrated using a simple child artboard and a parent artboard.

Modifying and monitoring changes in these inputs is made simple using different methods, offering a variety of possibilities for creating finer animations.

Highlights

• 🔑 Explains how to manipulate artboard inputs using keys.
• 🎨 Discusses how a parent artboard can control the inputs of a child artboard.
• 🚦 Details the use of different inputs such as a number, Boolean and a trigger.
• 💻 Demonstrates the modification of these inputs on the main artboard using the inputs panel.
• 🎬 Shows how the trigger causes an input to disappear and reappear each time it’s crossed on the timeline.
• 🔀 Outlines how to control a Boolean input, switching it on and off at desired instances.
• 💫 Discusses the importance of setting key values and interpolations to accurately control the number input.
• 🔄 Concludes with how the use of keys in controlling inputs can enhance animation possibilities.

7.25 Using Events with Nested Artboards

Summary

The video demonstrates how to use events with nested artboards in Rive.

It further explains how to manipulate parent or child artboards by creating and naming events, constructing event listeners, and toggling input values.

Highlights

• 🎬 The tutorial starts with a parent artboard and a child artboard with a play button feature.
• 📄 The presenter explains how to use events to manipulate a parent artboard from a child artboard.
• ⌨️ An event is created using the shortcut Shift + E, and it’s renamed to “click event”.
• 🔄 This event is set to notify the parent artboard upon click, thus affecting the parent artboard’s inputs.
• 🔈 A listener is created to detect the firing of the click event.
• 👥 The process is then replicated on another child artboard, designated as “child artboard 2”.
• 🆕 Both child artboards are set to individually control a new boolean for the parent artboard.
• 🔄 Clicking on the two buttons, triggers their respective booleans providing different functions.