What you'll build: Your first interactive animation from A to Z.

Perfect if you're: A designer, a developer, or both.

Why motion design ? Why now ?

This is probably the best time to be alive as a creative. We are living exceptional times where anyone can create basic software, explore ideas, and build things thanks to the latest advances in AI.

But easier software creation will also bring two problems:

1. A flood of average and tasteless software.
2. An increasing difficulty to stand out and being remembered.

Let's try to solve these making software delightful and memorable again.

Design: From flat to form

Before any animation work, you need a solid design and a clear art direction. Play with depth, light, and shapes. For this one, we will use a Headspace-like cute character with some twists: no flat design, and a more cartoony expression when waking up.

Not so flat design

Animating with Rive

What is Rive ?

Rive is a tool to create interactive designs & animations. Interactivity means that you can trigger animations, control them, and make them respond to user actions at runtime on a website, app, or game. Think After Effects, but the final export is an interactive animation, not an MP4.

Why it's a big deal ?

Rive animations are designed to be embedded into software. Later we will see that we have full control over them with code. Our playful animation here is only 3KB and will run on any website or app.

The thing is, most motion designers don't have UX/UI expertise and most of designers don't have motion design skills. If as a designer or developer, you can handle animations, then you can create interactive animations that are not only beautiful, but also functional in production apps.

The Rive editor

A Playful Onboarding