Guides · · Maxwell Prehoda
12 Onboarding Animation Examples That Teach Without Slowing People Down
Good onboarding animation does one of three things: it welcomes (a mascot, a greeting), it points (a pulsing hotspot on the feature you should try), or it shows progress (a checklist or stepper that fills as you go). Anything that doesn't do one of those is a delay between a new user and the product they signed up for.
The examples below are real flows and the tools and guidelines behind them, picked because their motion is specific enough to copy: Duolingo's lesson-first welcome, Material Design's carousel and tap-target timings, Apple's TipKit rules, and the open source tour libraries. Each says what it is best for, what it runs on and the trap to avoid. Where we have a pure-CSS version of the pattern, it plays live under the entry.
1. Duolingo's lesson-first welcome: Best for consumer apps that can show value before sign-up
Platform: Native iOS and Android, web
Duolingo is the standard example of gradual engagement. Appcues' teardown walks through it: Duo the owl welcomes you, you pick a language, a goal and your reason for learning, and you do a real translation exercise before you are ever asked to create an account. Sign-up prompts appear later, at natural points such as after a lesson.
The animation is small and constant: Duo waving, an animated progress bar filling through each lesson, celebratory moments when you finish. None of it blocks you. The motion rewards actions you already took, which is why it reads as encouragement rather than decoration.
Our Waving Hand below is a pure-CSS version of the greeting beat: a few big arcs from the wrist, then a rest, made to sit next to a welcome line.
Watch out for: Duolingo invests heavily in its characters (it animates them with Rive state machines). Copy the structure (value first, small rewards on every step), not the volume of character animation, unless you can maintain it.
2. Material Design's top user benefits carousel: Best for a short intro carousel with exact timing rules
Platform: Material Design guidelines (Material 1, archived)
Google's original Material guidelines describe three onboarding models: Self-Select (a short set of choices), Quickstart (straight into the app) and Top User Benefits, a brief autoplay carousel or animatic. For that carousel they give rare, concrete motion rules: at most three illustrations, each rotating every two to three seconds, with the first screen advancing faster so people see there is more than one. Auto-advance stops the moment the user touches it, the screens swipe in both directions, and the button and pagination stay fixed while the illustration layer moves.
Those rules fix the usual carousel problems: too many slides, auto-play that fights the user, and a Get Started button that slides away. The guidance also says to show onboarding only to first-time users and never to combine Self-Select with Top User Benefits.
Watch out for: This is Material 1, which Google no longer maintains. The timing rules still hold, but check Material 3 for current components, and add a visible skip or Get Started on the first screen.
3. Material feature discovery tap targets: Best for pointing at one feature at the right moment
Platform: Material Design guidelines (Material 1, archived)
The same guidelines spell out the feature discovery prompt in detail. A circular target emerges from the icon it highlights, over a large background in your primary color at 96% opacity. While idle, the action grows about 10% over one second and shrinks back, and a touch ripple radiates out as it reaches full size. Tapping the action expands the target and fades it out with an ease-out; tapping outside shrinks it away.
Just as useful are the frequency rules: show no more than one prompt per session, wait a substantial period after a dismissal before showing a similar one, and never show prompts right after the app opens. On Android, the open source TapTargetView library (Apache 2.0, about 5,500 stars) implements this pattern.
Our Tap Hint Attention Button below is a pure-CSS cousin: a cursor glides in, taps, the button dips and sends out a ripple, and it all stops the moment you hover.
Watch out for: A pulsing prompt on every screen trains people to ignore it. Keep to one per session, as the guideline says, and only for features the user hasn't tried yet.
4. Apple TipKit: Best for native iOS and macOS feature hints
Platform: Swift and SwiftUI, iOS 17 and later
TipKit is Apple's framework for contextual tips, available from iOS 17, iPadOS 17 and macOS 14 (with tvOS, watchOS and visionOS support too). You define a tip's content and the conditions under which it appears, then show it as a popover attached to a control or inline in your layout, and the system handles presentation and motion so it feels native.
Apple's own documentation is the best onboarding advice on this list: use tips sparingly for non-obvious features, avoid showing tips every time someone uses the app, and don't use tips to guide people through the app or for advertising. In other words, TipKit is for discovery, not for a forced tour.
Watch out for: Because the system draws the tip, you get little control over its animation. If your onboarding depends on a custom branded motion, TipKit is the wrong tool; if you want something that feels like iOS, it is the right one.
5. Driver.js: Best for lightweight web tours with no dependencies
Platform: Vanilla JavaScript and TypeScript, MIT
Driver.js is a small, dependency-free library for product tours, feature highlights and onboarding checklists. It dims the page with an overlay, cuts out the element you want to show, and attaches a popover with a title, description and progress. The docs include an animated and a non-animated version of the same tour, so you can choose how much motion moves the highlight between steps.
It works with React, Vue, Angular, Svelte, Solid or plain JavaScript, and it is MIT licensed with no attribution required, which makes it the default pick for a SaaS app that wants a tour without a vendor.
Watch out for: An overlay tour blocks the product while it runs. Keep it to three to five steps, let people exit at any point, and offer to replay it later instead of forcing it on first login.
6. React Joyride: Best for React apps that want a beacon-style tour
Platform: React 16.8 to 19, MIT
React Joyride, with about 7,900 GitHub stars, builds tours from a simple array of steps, each pointing at a CSS selector with some content. Its signature is the beacon: a small dot whose inner and outer rings pulse on the target, inviting a click before the tooltip opens. Version 3 is SSR-safe, adds focus trapping and keyboard navigation, and is roughly 30% smaller than v2.
The beacon is the polite version of a tour. Instead of taking over the screen, it marks the spot and lets the user decide when to learn. Our Onboarding Hotspot Tooltip, further down this list, is a pure-CSS take on the same pulsing marker.
Watch out for: Beacons placed on elements that move (sidebars that collapse, lists that reorder) end up pointing at nothing. Anchor them to stable elements, and test on small screens where the target may be hidden.
7. Shepherd.js: Best for accessible tours in open source projects
Platform: JavaScript (React, Vue, Angular, Ember), AGPL or commercial
Shepherd builds tours as a sequence of accessible dialogs attached to elements, with keyboard navigation, focus trapping and ARIA attributes built in. Set `useModalOverlay` to spotlight the current element, and `scrollTo` with smooth behavior to glide the page to each step. Positioning uses Floating UI, so steps don't get cropped by overflow.
Its motion is deliberately minimal: a smooth scroll and a spotlight. For onboarding inside complex apps, that restraint is a feature, because the user's attention stays on the interface being explained.
Watch out for: Shepherd is AGPL-3.0. It is free for open source, personal and non-commercial projects, but commercial products need a paid license. Check this before you build your tour on it.
8. Lottie by Airbnb: Best for illustrated onboarding screens from After Effects
Platform: Lottie (Web, iOS, Android, React Native, Windows)
Most illustrated onboarding carousels in mobile apps are Lottie files. Airbnb's library plays After Effects animations exported as JSON with the Bodymovin plugin and renders them natively on the web, iOS, Android, React Native and Windows, so designers can ship the exact animation they made without an engineer rebuilding it.
For onboarding that means each welcome screen can have a crisp vector animation that scales to any device and is usually far lighter than video. Combine it with Material's carousel rules above (three screens, fixed button, stop on touch) and you have the classic intro done properly.
Watch out for: Lottie files can get heavy when they include raster images or many layers, and the player adds its own script. Check each file's size, and give reduced-motion users the first frame instead of the loop.
9. UserOnboard teardowns: Best for studying real first-run flows screen by screen
Platform: Website (onboarding teardowns and patterns)
Before you animate anything, watch how others onboard. UserOnboard is a frequently updated collection of web app first-run experiences, with screen-by-screen teardowns of products such as ClickUp, Zapier and Canva, plus a library of onboarding patterns.
Use it to decide where motion belongs. In most teardowns the friction is copy and sequence, not animation, and the animation that helps is the kind that marks progress or celebrates a finished step.
Watch out for: Teardowns are snapshots and products change their onboarding often. Treat them as patterns to test, not as the current state of each product.
10. Our Onboarding Hotspot Tooltip: Best for a pulsing product-tour marker with no library
Platform: Motions directory, free, pure CSS Ours
A pulsing beacon that opens a tour card to its left with a step count, a title, one line of help and progress dots. The rings are two pseudo-elements pinging out of step with each other, so the pulse feels alive without looking frantic.
Use it for a one-off feature hint where a whole tour library would be overkill. Show it once, remove it when the user tries the feature, and see the Tooltips directory for calmer tips to follow it.
Watch out for: A pulse is an interruption. Respect the one-prompt-per-session rule from Material's guidance, and let the reduced-motion guard turn the rings into a static outline.
11. Our Checklist with Progress Bar: Best for SaaS setup checklists that fill as you go
Platform: Motions directory, free, pure CSS Ours
Many SaaS products onboard with a setup checklist instead of a tour: connect your data, invite a teammate, create a first project. This one shows the motion that makes checklists work. The bar fills a third per ticked item and the counter reads 2 / 3 done.
There is no script: the bar uses :has() to count checked boxes and the counter is a plain CSS counter. Wire the real checkboxes to your setup steps and the progress animates itself.
Watch out for: Only include steps that lead to real value. A checklist padded with "watch a video" tasks makes people feel busy without getting them anywhere.
12. Our Stepper Progress Bar: Best for multi-step sign-up and setup wizards
Platform: Motions directory, free, pure CSS Ours
For Self-Select onboarding (choose your role, your team size, your goals), people need to know how many questions are left. Four steps are joined by connectors that fill one after another; each step pops as it becomes current and turns into a check once done.
One registered @property drives every state, so you set a single number for the current step and everything else follows. It keeps the motion consistent across every screen of the wizard.
Watch out for: Keep it honest. If a step can branch into extra questions, count them, or the bar jumps backwards and people lose trust in it.
How to choose onboarding animation
Match it to your onboarding model
Decide the model first, using Material's three: Self-Select needs a stepper, Quickstart needs contextual hints (TipKit, a hotspot, a tap target), and Top User Benefits needs a short carousel with Lottie or CSS illustrations. Duolingo mixes Self-Select with value-first lessons. Don't add a carousel to a product people already understand.
Match it to your stack and license
Native iOS gets TipKit for free. On the web, Driver.js (MIT, no dependencies) and React Joyride (MIT) cover most tours; Shepherd needs a commercial license for commercial products. If you only need one hint or a checklist, the pure-CSS pieces in our Tooltips and Checkboxes directories avoid a library entirely.
Match it to the moment
Welcome motion belongs on the first screen only. Pointing motion belongs at the moment someone could use the feature, never at app launch. Progress motion belongs on every completed step, and a small celebration at the end is earned; see our success animation guide for that last beat.
Fix your first five minutes this week
Create a fresh account in your own product and record your screen. Count the seconds until you do something useful, and note every animation you sat through on the way. Remove anything that delays the first useful action, then add one piece of motion that marks progress.
If you want onboarding motion that matches your brand, describe the moment in the creator (or paste your screen's HTML) and get production-ready CSS keyframes with reduced-motion behavior built in.
Make an onboarding hotspot for a SaaS dashboard. A 10px accent dot with two rings that pulse out to 2.5x and fade, 1.6s loop, the second ring 0.8s behind the first. On click, a card opens beside it in 220ms (scale from 0.96 and fade, ease-out) with step 1 of 3, a title, one line of help and a Next button. The pulse stops once the card is open. With prefers-reduced-motion, show a static ring and open the card with a fade only. HTML and CSS only.
Common questions
What is an onboarding animation?
Any motion that helps a new user get started: a welcome animation on the first screen, a pulsing hint that points at a feature, a progress bar or checklist that fills as setup steps are completed, or a small celebration when they finish. The best ones respond to what the user just did.
How long should an onboarding carousel be?
Material Design's guidance caps the Top User Benefits carousel at three illustrations, rotating every two to three seconds and stopping as soon as the user touches it. Keep a Get Started or Skip button fixed and visible on every screen.
Should I use a product tour or contextual tips?
Prefer contextual tips shown when the feature is relevant. Apple's TipKit documentation says not to use tips to guide people through an app, and Material's feature discovery guidance limits prompts to about one per session. Use a short tour only for genuinely complex interfaces, and let people skip it.
What tools are used for onboarding animations?
Lottie for illustrated screens made in After Effects, Rive for interactive characters, TipKit on Apple platforms, tour libraries such as Driver.js, React Joyride and Shepherd on the web, and plain CSS for hotspots, checklists and steppers.
How do I make onboarding animation accessible?
Respect prefers-reduced-motion, never auto-advance content the user is reading without a way to pause it, make tour steps keyboard reachable with focus moved into each dialog, and make sure every hint can be dismissed and does not come back on every visit.