Motion & Microinteractions
Lottie, GSAP, Framer Motion — brand-led motion that lifts conversion without taxing performance.
· Reviewed by senior engineers
01 What it is
What this service is
Motion design and microinteractions are the moving layer of the brand — the page transitions, scroll effects, hover states, loading states, and signature animations that turn a static design into a felt experience.
At devinsta we design motion in After Effects or Figma, ship to web via Lottie + Framer Motion / GSAP, and to mobile via SwiftUI animations + Lottie on iOS, Compose motion + Lottie on Android.
02 What it's for
What it's for
Motion earns its keep when a brand is differentiating on premium feel (consumer apps, luxury e-commerce, agency portfolios) or when motion improves clarity (data viz, onboarding flows, complex form interactions).
It is the wrong investment when the site is still failing Core Web Vitals or when the design system itself is unfinished. Motion is the polish layer; the foundations need to be right first.
03 How to use it
How to engage devinsta
We start with a motion brief — what's the brand personality, where does motion live (hero, transitions, scroll, hover), what's the performance budget. We then design the system (timing curves, durations, easing), build the components, and ship.
04 How to deploy
How we deploy it
Motion components live in the same design system / Storybook as static UI. We constrain motion via prefers-reduced-motion and ship a fallback for every animated element. We measure animation performance with Chrome DevTools and the React DevTools profiler.
We never let motion regress LCP, INP, or CLS — performance budgets are part of CI.
05 What we provide
What you get from us
- Motion brand brief and principles
- Storyboards and motion specs
- Lottie files and Framer Motion / GSAP code
- SwiftUI / Compose motion implementation
- prefers-reduced-motion fallbacks
- Performance budget enforcement
- Storybook documentation
FAQ
Common questions
Will motion slow the site down?
Not if engineered correctly. We use compositor-friendly transforms, prefers-reduced-motion fallbacks, and CI checks that fail if Core Web Vitals regress. A well-built motion layer is invisible to performance.
Lottie or CSS animation?
Lottie for complex multi-element animation (logos, illustrations). CSS / Framer Motion for UI motion (transitions, hovers, scroll effects). Lottie is heavier so we use it deliberately.
Do you handle accessibility?
Yes — every motion respects prefers-reduced-motion, never relies on motion to communicate state, and ships with non-animated fallbacks. The EU Accessibility Act (June 2025) is built in.