course-rive

Animated App with Rive and Ionic + Angular

An application with interactive UI and animations, with custom UI components like Bottom TabBar and SideBar, and using animated assets from Rive.

Web Demo

👀 This is how it looks

ionic_rive_demo_github.mp4

📦 Packages used

1. ng-rive: To render and control the Rive assets.

🔤 Fonts used

1. Inter-Regular.ttf
2. Inter-SemiBold
3. Poppins-Bold

🎥 Tutorials

Episodes
1. OnBoarding and SignIn UI 🔖 Topics Covered • OnBoarding UI • SignIn UI • Using SignIn UI as custom modal with transition animation • Using and controlling Rive assets for animation • Some Rive topics like Artboard, State Machines, one-shot animation etc.
2. Bottom Tab Bar and Home UI 🔖 Topics Covered • Custom Bottom TabBar with animated icons • Home Screen UI • Update screen based on active tab
3. Side Menu and Wrap up 🔖 Topics Covered • Custom Side Menu UI with animated icons • Combining Side Menu and other parts of UI with Home • Presenting Side Menu & OnBoarding with animations as well as handling visibility of other UI elements

🌻 Motivation

This app is a full Ionic + Angular replication of this SwiftUI course by @MengTo.

🔗 Links

• SwiftUI + Rive: Original course in SwiftUI.
• Flutter Rive: Flutter version for the same.
• Demo: web | youtube | twitter