awesome-rive

An awesome list that curates Rive runtime examples, articles and tutorials, videos, resources and more!
https://github.com/rive-app/awesome-rive

Last synced: about 23 hours ago
JSON representation

Articles
- Flutter
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - 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
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
  - Rive 2 — 2.5D Avatar With Pointer Tracking Using Flutter - Interactive head tracking example.
- Introduction
  - Rive Blog
- Case Studies
  - 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
  - Getting mischievous with Rive - "We love playing around with new software, so we picked up Rive, an app for creating interactive animations."
  - From Concept to Code: How Rive Supercharged My Design Implementation - "For anyone interested in efficient design-to-development workflows."
  - 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!".
  - Create Rive-ting Animations - "Rive reduces the time it takes to make complex animation, making some motion items easier and faster to build."
  - 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".
  - 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"
  - From Concept to Code: How Rive Supercharged My Design Implementation - "For anyone interested in efficient design-to-development workflows."
- 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
  - Responsive Animation Login Screen - Implement an animated login experience using Rive on Android
- 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.
- NativeScript
  - 🤘 Rock on with Rive in NativeScript - Run Rive with NativeScript
Runtime Documentation
- Qt
- Tizen
- Rive GameKit
- Web/JS
- iOS
- Android
- Flutter
- React
- React-Native
- Windows
- Defold
- Noesis
Games
- Web/JS
  - Tappy Turkey - A Flappy Bird kind of game.
- Flutter
  - Find the Dog - Simple guessing game displaying a grid of Rive state machines.
  - Car wash! - A simple demo, all state and game logic is handled in Rive.
- 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](https://www.youtube.com/watch?v=0FDHpOpfX_U).
Videos
- Introduction
  - Intro to Interactive Animation in Rive - UI Animation Tool (School of Motion)
  - Rive YouTube channel
  - 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
  - Choose Your Own Adventure - Build a CYOA game showcasing dynamic Rive text and reactive adjustable text containers, with story/prompts generated by Chat GPT
  - Tappy Turkey Game - Create a Flappy Bird like game with Rive.
  - Rive button Implementation in Webflow - Jeff McAvoy
  - Tappy Turkey Game - Create a Flappy Bird like game with Rive.
  - 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.
  - 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.
  - Animated Icons in Android - Rive - Create your own animated vector icons with Rive.
  - 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.
  - SwiftUI/Rive: Create an animated swipe to delete - Step-by-step tutorial to create an animated swipe to delete with SwiftUI 5 using DragGesture.
  - 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.
  - 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.
  - 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.
  - 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.
- [Noesis](https://www.noesisengine.com)
  - 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](http://framer.com)
  - 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
  - Rise of the Robots | Gatsby + Rive - Immersive web experiences can get high lighthouse scores, be fully accessible, and convert users across all devices.
Use Cases
- Forms
  - React Teddy Login Screen - Animated teddy login screen.
  - Flutter Teddy Login Screen - Animated teddy login screen.
  - Delightful Ocean Email Form - Render interactive code "in between" a Rive animation. See video [here](https://youtu.be/RyKMaTqpU7U?t=3145).
- Swipe Interactions
  - Swipeable (dismissable) daily TODO app demo - Demonstrates how to create custom swipeable (dismissable) gestures, with a synced Rive animation.
  - Swipe to delete animation - A video tutorial on how to attach an animation to a drag gesture to delete todo items ([code](https://github.com/HayesGordon/swiftui-animated-swipe-to-delete/tree/main)).
- Pull To Refresh
  - Rive Pull To Refresh use case page
- Buttons/Icons
  - Adding Animation to Buttons in Flutter using Rive - Simple Animated Menu Toggle Button in Rive
- Skinning
  - A simple skinning example - Skinning is managed in the Rive editor and toggled with an input
- Sync Sounds at runtime
  - One Kraken Band - Sync sound with actions in the state machine using the high-level JS runtime and howler.js
- Animated Cursor
  - Animated spider cursor - Create an animated spider cursor that crawls across the screen.
Advanced
- Sync Sounds at runtime
  - 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.
  - Android Rive Piggy - Combine multiple artboards together to layer an animation.
  - Rive Canvas Advanced API - Centaur Example game, combining multiple artboards.
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
- Android
  - Coffee Loader - Play with a cute coffee loader built by [@JcToon](https://twitter.com/HelloJcToon)
- React-Native
  - Rive Animated App - Recreation of DesignCourse app.
  - Weather App - Utilizing the [weatherapi.com](http://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.
  - Rive Animated App - Recreation of DesignCourse app | [Web Demo](https://aashu-dubey.github.io/flutter-samples/#/course-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)
  - Developer Quest - Become a tech lead, slay bugs.
  - The Mαth∫etΣs (Honorable Mention)
- React
  - Plant Blog - NextJS blog template with Rive to show animated blog thumbnails and syncing scroll to Rive animations deployed on Vercel. [Code](https://github.com/zplata/plant-blog-rive)
  - Rise of the Robots - Gatsby app with stateful and interactive Rive content with accessibility and performant practices in mind. [Code](https://github.com/PaulieScanlon/rise-of-the-robots)
  - Spotify Player - A music player built with Rive, using Spotify APIs and Rive Events to control audio playback with "Recently Played" songs
  - Rise of the Robots - Gatsby app with stateful and interactive Rive content with accessibility and performant practices in mind. [Code](https://github.com/PaulieScanlon/rise-of-the-robots)
- Ionic
  - Rive Animated App - Recreation of DesignCourse app using Angular | [Web Demo](https://aashu-dubey.github.io/Ionic-UI-Templates/course-rive)
Rive Overview
- Rive - 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.
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](https://github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/ui/rive_app), [React-Native](https://github.com/lklima/rive-animated-app) and [Ionic](https://github.com/Aashu-Dubey/Ionic-UI-Templates/tree/main/ionic_ui_templates/src/app/templates/course-rive) are also available as open source projects.
Resources
- SwiftUI
  - Riveflow - Learn how to create next-level interactive animations for Webflow websites with Rive.

Programming Languages

Dart 7 JavaScript 3 Kotlin 2 TypeScript 2 C++ 2 Java 1 Swift 1 C 1

awesome-rive

Articles

Flutter

Introduction

Case Studies

GameKit

Web

React

Android

Frameworks

NativeScript

Runtime Documentation

Games

Web/JS

Flutter

Flame (Flutter)

Videos

Introduction

Rive Editor

Rive GameKit

Web/JS

React

Android

iOS/SwiftUI

React Native

macOS

Flutter

[Noesis](https://www.noesisengine.com)

[Framer](http://framer.com)

Defold

Webflow

Frameworks

Use Cases

Forms

Swipe Interactions

Pull To Refresh

Buttons/Icons

Skinning

Sync Sounds at runtime

Animated Cursor

Advanced

Sync Sounds at runtime

Open Source Apps with Rive Animations

Web

Android

React-Native

Flutter

React

Ionic

Rive Overview

Courses

SwiftUI

Resources

SwiftUI