Skip to content

An awesome list that curates Rive runtime examples, articles and tutorials, videos, resources and more!

Notifications You must be signed in to change notification settings

BertholdKrevert/awesome-rive

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 

Repository files navigation

Discord badge Twitter handle

Awesome Rive

dragon_rive_banner

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:

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 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

Case Studies

Duolingo

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

Animade

Contenda

Plumcat

EvolveYou

Struck

GameKit

Web

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

React

NativeScript

Android

iOS

  • Be the first to add 🚀

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

Rive Editor

Runtime Basics

Rive GameKit

Web/JS

React

Android

iOS/SwiftUI

React Native

macOS

Flutter

Defold

Webflow

Frameworks

Gatsby


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

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)


Use Cases

Pull To Refresh

See the Rive Pull To Refresh use case page.

Forms

React

Flutter

Buttons/Icons

Flutter

Skinning

Web/JS

Swipe Interactions

SwiftUI

Animated Cursor

Flutter

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

JS

Android


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

React-Native

Flutter

Ionic

About

An awesome list that curates Rive runtime examples, articles and tutorials, videos, resources and more!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published