Awesome

Awesome Rive

A collection of resources and examples on using Rive, from articles, videos, courses, and everything else.

Want to add your content? Check out our contributing guide!

Table of contents:

• Awesome Rive
  • Rive Overview
  • Runtime Documentation
  • Courses
    • SwiftUI
  • Resources
  • Articles
    • Introduction
    • Case Studies
    • GameKit
    • Web
    • React
    • NativeScript
    • Android
    • iOS
    • Flutter
    • Frameworks
  • Videos
    • Introduction
    • Rive Editor
    • Runtime Basics
    • Rive GameKit
    • Web/JS
    • React
    • Android
    • iOS/SwiftUI
    • React Native
    • macOS
    • Flutter
    • Noesis
    • Defold
    • Webflow
    • Frameworks
  • Games
    • Unity
    • Bevy
    • Flutter GameKit
    • Noesis
    • Web/JS
    • Flutter
    • Flame (Flutter)
  • Use Cases
    • Pull To Refresh
    • Forms
    • Buttons/Icons
    • Skinning
    • Swipe Interactions
    • Animated Cursor
    • Sync Sounds at runtime
  • Advanced
  • Open Source Apps with Rive Animations
    • Web
    • React
    • Android
    • React-Native
    • Flutter
    • Ionic

Rive Overview

Rive is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.

Runtime Documentation

• Rive GameKit
• Web/JS
• iOS
• macOS (Coming Soon)
• Android
• Flutter
• React
• React-Native
• Windows
• C++
• Qt
• Defold
• Tizen
• Noesis

Courses

SwiftUI

• Build an animated app - Free course that teaches you how to design and code an iOS/SwiftUI app with Rive animated assets, icon animations, custom layouts, and interactions. Flutter, React-Native and Ionic are also available as open source projects.

Resources

• Riveflow - Learn how to create next-level interactive animations for Webflow websites with Rive.

Articles

Introduction

• Official Rive Blog

Case Studies

Duolingo

• Lip Syncing - Art meets technology: the next step in bringing our characters to life.

• How we Animate the Duolingo World - The innovative tech behind our characters

Animade

• Getting mischievous with Rive - "We love playing around with new software, so we picked up Rive, an app for creating interactive animations."

Contenda

• From Concept to Code: How Rive Supercharged My Design Implementation - "For anyone interested in efficient design-to-development workflows."

Plumcat

• The Principles of Animation: Interactive Edition - "We've had a ton of fun experimenting with an animation of a cat in a washing machine."
• The Power of Rive: A New Standard for Interactive Animations - "We've been playing around with this awesome interactive animation tool called Rive, and it's blown us away!".

EvolveYou

• How We Designed a Gamification Platform to Keep Our Users Engaged - "Rive was the best choice for us as it’s the rising star in bridging animation between design and code".

Struck

• How Rive Helped Us Bring Ambitious Ideas to Life for Chia.com - "The magic here is…we added the functionality piece by piece by using state machines. Something that would take you a lot of hours was just a few clicks away with Rive"

Viget

• Create Rive-ting Animations - "Rive reduces the time it takes to make complex animation, making some motion items easier and faster to build."

GameKit

• Why we chose Flutter for the Rive GameKit - "The Rive GameKit for Flutter is the first product to take advantage of the Rive Renderer. It's available now as a technical preview"

Web

• ARIA Live Regions - Implement accessibility features with dynamically changing content.

React

• Animated Login Screen - Implement an animated login experience using Rive's React runtime.
• Optimization techniques - Techniques to optimize Rive animations in React apps.
• Animate Web UIs with State Machines - Explore Rive state machines to build web UIs

NativeScript

• 🤘 Rock on with Rive in NativeScript - Run Rive with NativeScript

Android

• Responsive Animation Login Screen - Implement an animated login experience using Rive on Android

iOS

• Be the first to add 🚀

Flutter

• Flutter Web and Rive Animation Tutorial - Beginner to intermediate tutorial for setting up a Flutter web app with Rive animations.
• Flutter SVG Animations with Rive (Reso Coder) - Sprinkling some beautiful animations across your app.
• Rive Flutter Animation - Best approach for animation in 2023.
• Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
• Flutter Flow Rive Integration - How to use Rive in Flutter Flow
• Rive Animation for Flutter: A Beginner's Guide to Creating Stunning Animations with Ease! - An indepth guide on creating and integrating Rive animations in Flutter

Frameworks

• Framer Integration - Use interactive Rive content in Framer's flexible website builder without code.
• Wordpress Addon - Greenshift animation addon allows you to use and configure Rive files directly in the WordPress editor.
• Gatsby - Create a seamless designer-developer workflow with Rive and Gatsby.
• Gatsby - Building Rise of the Robots.

Videos

Introduction

• Official Rive YouTube channel.
• Intro to Interactive Animation in Rive - UI Animation Tool (School of Motion)
• Create the Most AMAZING Animations with Rive - Crash Course (DesignCourse)
• Animating with Rive - Rubber Duck Engineering

Rive Editor

• Hamburger Menu - Use simple motion to create icon animations.
• Wait, Loading - Create a loading bar in Rive.

Runtime Basics

• [Handling Rive buttons at runtime] (https://www.youtube.com/watch?v=bfR2xiF4uS4) - Considerations for integrating a button at runtime.

Rive GameKit

• Introducing the Rive GameKit for Flutter - Overview of the Rive GameKit
• Explore the Rive GameKit - Let's create the Centaur Game - Take a first look at the Rive GameKit and learn how to build the Centaur Game from scratch.

Web/JS

• Tappy Turkey Game - Create a Flappy Bird like game with Rive.
• Integrating your RIVE Animations on the Web! - DesignCourse
• Rive button Implementation in Webflow - Jeff McAvoy
• TensorFlow + Rive - Learn how to use TensorFlow and hand-detection models to drive Rive State Machines
• Choose Your Own Adventure - Build a CYOA game showcasing dynamic Rive text and reactive adjustable text containers, with story/prompts generated by Chat GPT

React

• Simple Skinning - Toggling through a skinning state machine.
• Syncing Scroll Position with Rive - Scroll position influencing Rive animations/state machines.

Android

• Animated Icons in Android - Rive - Create your own animated vector icons with Rive.

iOS/SwiftUI

• Build iOS app with Rive Animations - A full 3-hour course showcasing how to build a SwiftUI app with Rive animations.
• SwiftUI Animated Login Screen using Rive - Teddy Bear Animation, create an animated and interactive Login screen.
• Glassmorphism card - Complex background animations using SwiftUI & Rive.App
• SwiftUI/Rive: Create an animated swipe to delete - Step-by-step tutorial to create an animated swipe to delete with SwiftUI 5 using DragGesture.

React Native

• Building a Weather App - Series on building Rive animations in a React Native app with weather API data.

macOS

• Amimated macOS Doc Icons - Adding animated macOS doc icons.

Flutter

• Use Rive and Flutter for dynamic, interactive, & animated experiences - (Flutter Interact '19)
• PuzzleHack - Demonstrating Rive on the Flutter Community live stream for the 2022 Flutter Puzzle Hack.
• Building a Find-the-Dog Game - Building a simple guessing game with a grid of Rive instances.
• Animated Bottom Bar - Integrations and editor example to create an animated bottom bar in Flutter
• Plant Growing Animation with Rive and Flutter - Implement the animation in Flutter
• Animated Water Bar Slider - Learn how to make an animated custom slider with Flutter + Rive
• FlutterFlow Rive Animation Tutorial - Add Rive animations to your FlutterFlow app.
• Add Rive to your Flutter Flame game - Learn how to add interactive Rive animations to a Flutter Flame game.
• Create an animated spider cursor - Replace your mouse cursor with a crawling spider

Noesis

• Use Rive and Noesis to create animated UI for games - A sizzle video showcasing Rive + Noesis
• Create animated UI in Unity using Rive and Noesis - Tutorial on how to add Rive to your Unity games using Noesis.
• Unreal tutorial for Rive + Noesis - Tutorial on how to add Rive to your Unreal games using Noesis.

Framer

• Rive + Framer Demo - A getting started tutorial on how to add Rive to Framer
• Update Rive text in Framer - Tutorial on how to update React code in Framer to dynamically change a text run

Defold

• Rive + DEFOLD == Win? - Take a look at Rive and Defold (Gamefromscratch)

Webflow

• Add interactivity to your Webflow sites with Rive - Use Rive share links to quickly add animations and interactivity to WebFlow websites.
• Pointer Tracking Animation Implemented in Webflow - How to set up a Rive file with pointer tracking for Webflow implementation.

Frameworks

Gatsby

• Rise of the Robots | Gatsby + Rive - Immersive web experiences can get high lighthouse scores, be fully accessible, and convert users across all devices.

Games

Unity

Learn more about the Unity runtime: https://help.rive.app/game-runtimes/unity

GitHub Repository: https://github.com/rive-app/rive-unity

Official examples: https://github.com/rive-app/rive-unity-examples

Bevy

Learn more about the Bevy runtime: https://help.rive.app/game-runtimes/bevy

GitHub Repository: https://github.com/rive-app/rive-bevy

Flutter GameKit

Learn more about the Rive GameKit: https://help.rive.app/rive-gamekit/overview

Example games: https://github.com/rive-app/rive-gamekit-examples

Noesis

Learn more about Rive + Noesis: https://rive.app/use-cases/rive-noesis

Web/JS

• Tappy Turkey - A Flappy Bird kind of game.

Flutter

• Car wash! - A simple demo, all state and game logic is handled in Rive.
• Find the Dog - Simple guessing game displaying a grid of Rive state machines.

Flame (Flutter)

• Flame/Rive Doodle Dash Game - An extension to the Flame Doodle Dash game to add Rive animations. See step-by-step video tutorial.

Use Cases

Pull To Refresh

See the Rive Pull To Refresh use case page.

Forms

React

• React Teddy Login Screen - Animated teddy login screen.

Flutter

• Delightful Ocean Email Form - Render interactive code "in between" a Rive animation. See video here.
• Flutter Teddy Login Screen - Animated teddy login screen.

Buttons/Icons

Flutter

• Adding Animation to Buttons in Flutter using Rive - Simple Animated Menu Toggle Button in Rive

Skinning

Web/JS

• A simple skinning example - Skinning is managed in the Rive editor and toggled with an input

Swipe Interactions

SwiftUI

• Swipe to delete animation - A video tutorial on how to attach an animation to a drag gesture to delete todo items (code).
• Swipeable (dismissable) daily TODO app demo - Demonstrates how to create custom swipeable (dismissable) gestures, with a synced Rive animation.

Animated Cursor

Flutter

• Animated spider cursor - Create an animated spider cursor that crawls across the screen.

Sync Sounds at runtime

Web/JS

• One Kraken Band - Sync sound with actions in the state machine using the high-level JS runtime and howler.js

Advanced

Flutter

• Track a Rive component in Flutter - Demo showing how to make use of the low level rendering to track a Rive component and overlay text with a painting context.
• Dynamically update component colors at runtime - Make use of a custom Rive render object to change a shape's fill color, accessing it by name.

JS

• Rive Canvas Advanced API - Centaur Example game, combining multiple artboards.

Android

• Android Rive Piggy - Combine multiple artboards together to layer an animation.

Open Source Apps with Rive Animations

Web

• Tuner - A musical instrument tuning web app using Web Audio APIs and the low-level JS runtime
• Don't Look at Me - Using eye movement detection to trigger a state machine

React

• Plant Blog - NextJS blog template with Rive to show animated blog thumbnails and syncing scroll to Rive animations deployed on Vercel. Code
• Rise of the Robots - Gatsby app with stateful and interactive Rive content with accessibility and performant practices in mind. Code
• Spotify Player - A music player built with Rive, using Spotify APIs and Rive Events to control audio playback with "Recently Played" songs

Android

• Coffee Loader - Play with a cute coffee loader built by @JcToon

React-Native

• Rive Animated App - Recreation of DesignCourse app.
• Weather App - Utilizing the weatherapi.com API to build a weather app with animated backgrounds that match a given weather forecast

Flutter

• Holobooth - Jump into a new reality to bring Dash and Sparky to life!
• History of Everything - A vertical timeline that allows you to navigate, explore, and compare events from the Big Bang to the birth of the Internet.
• Developer Quest - Become a tech lead, slay bugs.
• Rive Animated App - Recreation of DesignCourse app | Web Demo.
• Flutter Puzzle Hack 2022 (Submission that made use of Rive)
  • Retro Slide Puzzle (Winner - Animation/Design)
  • Dash Slide Puzzle (Runner Up - Animation/Design)
  • Island Slide Puzzle (Third Place - Animation/Design)
  • Planets (Winner - Best Execution)
  • The Werewolves Escape (Winner - Most Creative)
  • Dashtronaut (Winner - Best Educational Content)
  • ZPuzzle (Winner - Most Valuable Flutter on the Web Feedback)
  • Slide Puzzle (Community Choice)
  • Way For Ball (Community Choice)
  • Hash (Community Choice)
  • Sliding Puzzle 3D (Honorable Mention)
  • Water Slide (Honorable Mention)
  • The Mαth∫etΣs (Honorable Mention)

Ionic

• Rive Animated App - Recreation of DesignCourse app using Angular | Web Demo