Skip to content
charmotion
Get started

How to Add an Animated Mascot to Any App: iOS, Android, Flutter, Web, Unity and More

Published · 13:22

Play video

Plays from YouTube in privacy-enhanced mode. Nothing loads from YouTube until you press play.

How to add an animated mascot to iOS, Android, Flutter, React Native, Expo, Webflow, Shopify, Lovable, Chrome extensions, Figma, Notion, Unity, Telegram, WhatsApp, Discord, iMessage, OBS and Twitch. 28 short, practical answers with the exact specs and the code-level steps for each platform.

Every character in this video was animated from a single image with Charmotion: 17 animations as a Rive file, transparent video, MP4 and GIF.

Watch on YouTube

Chapters

  1. 0:00Intro
  2. 0:27Add animation to a SwiftUI app
  3. 0:48Add a Rive animation to iOS
  4. 1:10Animated onboarding mascot in SwiftUI
  5. 1:42Looping animation in the Dynamic Island?
  6. 2:07Can you animate the iOS launch screen?
  7. 2:25Can you animate your app icon?
  8. 3:03How long should an Android splash be?
  9. 3:25Which Jetpack Compose animation API?
  10. 3:50Lottie or Rive in Flutter
  11. 4:12Does FlutterFlow support Rive?
  12. 4:32React Native: Animated or Reanimated?
  13. 4:54Rive not working in Expo Go?
  14. 5:32Is Framer Motion now called Motion?
  15. 5:51A Rive mascot in Webflow
  16. 6:22An animated mascot on Shopify
  17. 6:45A Rive mascot in a Lovable app
  18. 7:19Rive in a Chrome extension (MV3)
  19. 7:53Rive in Figma prototypes
  20. 8:24Animated Notion page icon
  21. 8:53A Rive mascot in Unity UI
  22. 9:29Telegram Mini App loading mascot
  23. 10:02Telegram video sticker rules
  24. 10:29WhatsApp animated sticker size
  25. 10:55Why WhatsApp stickers freeze on frame one
  26. 11:19Discord animated emoji limits
  27. 11:45iMessage sticker sizes
  28. 12:10Mascot overlay in OBS
  29. 12:37Twitch animated emotes from your mascot

Read more

See your own character move

Upload one image and get a free animated preview.

Free preview

More videos

All videos