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
- Rive GameKit
- Web/JS
- iOS
- macOS (Coming Soon)
- Android
- Flutter
- React
- React-Native
- Windows
- C++
- 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.
Animade
- Getting mischievous with Rive - "We love playing around with new software, so we picked up Rive, an app for creating interactive animations."
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
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.
- 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.
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
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
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.
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.
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
Rive GameKit
Learn more about the Rive GameKit: https://rive.app/use-cases/rive-gamekit-for-flutter
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
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
Swipe Interactions
SwiftUI
- Swipeable (dismissable) daily TODO app demo - Demonstrates how to create custom swipeable (dismissable) gestures, with a synced Rive animation.
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
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