Skip to content
charmotion
Get started

App Mascot Animation: States, Loading, Errors and Real UI Examples

Published · 11:57

Play video

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

When does an app mascot actually help, which states does it need, and how should it behave in loading screens, forms, empty states, checkout, fintech, kids, mental health, security and fitness apps? 25 answers with real UI examples, plus how to animate your own character from a single image.

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:27Should your app have a mascot?
  3. 0:42Do mascots increase engagement?
  4. 1:10Which states should a mascot have?
  5. 1:41Animate a character from one image
  6. 2:14PNG to Rive: manual vs one upload
  7. 2:45Animate a mascot without After Effects
  8. 3:15Animate your character with AI, on-model
  9. 3:50Animate a logo without changing the design
  10. 4:25Turn a logo into an animated character
  11. 4:56Swap your spinner for your logo
  12. 5:17Can a mascot replace a loading spinner?
  13. 5:48A habit tracker mascot that reacts
  14. 6:11Give your AI chatbot a face
  15. 6:32AI assistant avatar states
  16. 6:56Order tracking: the most watched screen
  17. 7:19A mascot on a landing page
  18. 7:43A sign-up form that reacts
  19. 8:08Empty states and 404 pages
  20. 8:38What should an empty screen show?
  21. 9:01Fintech: transfers, errors, fraud alerts
  22. 9:31Kids learning apps: wrong answers
  23. 9:57Mental health apps: calm states
  24. 10:25Checkout and payment
  25. 10:53Security apps without scareware
  26. 11:22Fitness: celebrate every workout?

Read more

See your own character move

Upload one image and get a free animated preview.

Free preview

More videos

All videos