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
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
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 MauiReactor recreations 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.
Animade
- Getting mischievous with Rive - "We love playing around with new software, so we picked up Rive, an app for creating interactive animations."
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
Android
- Be the first to add 🚀
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
Frameworks
- Framer Integration - Use interactive Rive content in Framer's flexible website builder without code.
- 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.
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
React
- Simple Skinning - Toggling through a skinning state machine.
- Syncing Scroll Position with Rive - Scroll position influencing Rive animations/state machines.
Android
- Be the first to add 🚀
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
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.
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
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
Flutter
- Flutter-Easy-Refresh - There are various Rive examples in this demo app. Take a look at Halloween Horror
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
Advanced
- 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.
- Rive Canvas Advanced API - Centaur Example game, combining multiple artboards.
- 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
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.
- 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)