By Shaheer Malik · Tool facts checked on 29 October 2026
Quick answer: Motion design is planning and building how a website or app moves: transitions, feedback, loading states, scroll effects and animated graphics. I design and build it with Rive for interactive graphics, Lottie for lightweight animations, and Framer, GSAP, Motion or CSS for interface motion, kept fast and accessible. It comes inside my fixed-price sprints, as a fixed quote for standalone pieces, or on the $2,500 monthly partnership.
What I design and build
- Interface motion. Page and screen transitions, hover and press feedback, menus, loading and empty states. The small moves that make a product feel finished.
- Interactive graphics. Rive animations that react to people: a mascot that follows the cursor, a toggle that morphs, a progress state driven by real data.
- Animated illustrations and icons. Lottie animations for onboarding, success states, empty states and icons, crisp at any size and light to load.
- Scroll storytelling. Sections that build as you scroll, for launches and product stories, with Framer's effects or GSAP.
- Product demo animations. Short loops that show a product working, for hero sections, landing pages and app stores.
Choosing the right tool for each moment
Most projects use two or three of these. The choice depends on what the motion has to do and who will maintain it.
| Tool | Best for | Worth knowing |
|---|---|---|
| Rive | Interactive graphics that respond to input or data | Design, animation and logic in one .riv file; runtimes for web, iOS, Android and more, MIT-licensed |
| Lottie | Illustrations, icons and loaders that play a set timeline | JSON vector animation, usually exported from After Effects; players for web, iOS and Android |
| Framer effects | Scroll and hover motion on a Framer site | Built in the editor, so the team can adjust it later |
| GSAP | Complex scroll and timeline sequences in code | Free for all users, supported by Webflow |
| Motion | UI animation in React, JavaScript or Vue apps | Previously Framer Motion; free and open source |
| CSS | Simple transitions and hover states | No library at all, so nothing extra to load |
| Video | Long, cinematic or filmed sequences | Heavier, but right when the content is footage |
Sources, read on 29 October 2026: rive.app, GSAP's pricing page and motion.dev. The detailed trade-offs are in Rive vs Lottie and GSAP vs Framer Motion.
Rive or Lottie?
The question I am asked most. Lottie plays a pre-made animation, usually designed in After Effects and exported as JSON. It is ideal for icons, illustrations and loaders that do the same thing every time. Rive adds a state machine: the animation listens for input, such as hover, a tap, a form field or live data, and reacts. If the graphic has to respond, use Rive; if it only has to play, Lottie is simpler.
How a motion project runs
- Purpose first. What each motion has to do: explain a change, guide attention, give feedback or tell a story. Motion without a job is cut.
- Storyboard. Key frames and timing agreed on paper before anything is animated, so changes are cheap.
- Build in the right tool. Rive, Lottie, Framer, GSAP, Motion or CSS, chosen by what the moment needs, not by habit.
- Integrate and test. Placed in the real site or app, checked for smoothness on an ordinary phone and for file size.
- Respect reduced motion. Non-essential motion is reduced or removed for people who ask their device for less motion.
- Hand over. Source files and the code that plays them, so your team can change or reuse the motion later.
Motion that stays accessible
WCAG 2.1 has three criteria that apply directly to motion:
- Pause, Stop, Hide (Level A). Anything that moves, blinks or scrolls on its own for more than five seconds alongside other content needs a way to pause, stop or hide it.
- Three Flashes or Below Threshold (Level A). Nothing flashes more than three times in any one second.
- Animation from Interactions (Level AAA). Motion triggered by interaction can be turned off unless it is essential. W3C's own example honours the prefers-reduced-motion setting.
I build to WCAG 2.1 AA, and I also honour the reduced-motion setting, which is the practical way to meet the AAA criterion. The W3C explains each one in Pause, Stop, Hide and Animation from Interactions.
Motion that stays fast
- Vector over video where the art allows it: Rive and Lottie files are usually small, and Lottie is often far lighter than an equivalent GIF.
- Animate the cheap properties. Movement, scale and fade run smoothly; animating layout makes the browser recalculate the page.
- Load late. Animations below the fold load when they are about to be seen.
- Test on an ordinary phone, not only on a fast laptop.
How to buy it
| You need | How it is priced |
|---|---|
| A new site with motion throughout | Framer website in 14 days, $1,999 fixed, which includes scroll and hover interactions |
| A standalone piece: a Rive graphic, a set of Lottie icons, a demo loop | A fixed quote after a 30-minute call |
| A steady stream of motion and design work | The monthly partnership, $2,500 a month, pause or cancel monthly |
Every price is agreed before work starts. There is no hourly rate.
When motion is the wrong spend
- When the page has not yet said clearly what you do. Motion amplifies a message; it cannot replace one.
- When the site is slow already. Fix the weight first, then add motion.
- When the motion would play on every visit to a page people use daily. What delights once annoys on the tenth time.
- When nobody can maintain it. Prefer tools your team can edit, such as Framer's own effects.
Motion design questions
What is motion design for websites?
Motion design is planning how elements on a site or app move: transitions, feedback, loading states, scroll effects and animated graphics. Good motion explains what just happened and where to look next, rather than only decorating.
Should I use Rive or Lottie?
Use Lottie for animations that play the same way every time, such as icons, illustrations and loaders. Use Rive when the animation has to react to people or data, through its state machines. Both are vector and small.
How much does motion design cost?
Motion for a whole site or product comes inside my fixed-price sprints, such as a Framer website in 14 days for $1,999, which includes scroll and hover interactions. Standalone pieces, such as a Rive animation or a set of Lottie icons, get a fixed quote after a 30-minute call. Ongoing work fits the $2,500 monthly partnership.
Will animation slow my site down?
Not if it is built with care. Vector formats such as Rive and Lottie are usually small, simple motion can be pure CSS, and every piece is checked on an ordinary phone before launch.
Is motion design accessible?
It can be. I keep motion purposeful, avoid flashing, give long-running motion a way to pause, and reduce non-essential motion for people who have asked their device for less, in line with WCAG 2.1.
Do I get the source files?
Yes. Source and design files are handed over, as on every sprint, along with the code that plays them, so your team can adjust or reuse the motion without me.
Is GSAP still paid?
No. When I checked on 29 October 2026, GSAP's site said it is 100% free for all users, thanks to Webflow's support.
Keep exploring
- Rive vs Lottie (compare)
- Rive vs After Effects (compare)
- Rive vs Figma Motion (compare)
- GSAP vs Framer Motion (compare)
- Lottie vs GIF (compare)
- Motion design (glossary)
- Rive (glossary)
- Framer Design & Development (service)
Make your site or app move with purpose
Book a 30-minute call or send a brief. You get a scope and a fixed quote within 24 hours.