Landing Page Motion That Converts (Without Killing Mobile FPS)

Use landing page animation performance budgets with Framer Motion: what to animate, how to respect reduced motion, and mobile lessons that protect conversion. This is the checklist I use when a brand needs presence without turning mid-range Androids into a slideshow.

Short answer

Landing page animation performance is a budget problem, not a library problem. Animate opacity and transform, keep the first viewport choreography short, respect reduced motion, and measure FPS on a real phone. Framer Motion is excellent when you treat it like hierarchy and timing, not like a particle cannon.

If removing the animation would still leave a strong brand composition, you are using motion correctly.

What motion is for on a landing page

Motion has three honest jobs:

• Presence: the brand arrives as one composition
• Hierarchy: eye moves brand → headline → CTA → proof
• Feedback: buttons and forms feel responsive

It is not for filling empty strategy. Stats strips, pill clusters, and floating badges do not become better because they bounce.

A practical Framer Motion budget

First viewport

Ship 2-3 intentional motions max in the hero: brand/title fade-up, supporting line, CTA group, optional hero media settle. Total choreography under about a second. Do not animate every letter unless you have measured the cost.

Avoid inset hero cards with their own bounce. Full-bleed or edge-dominant media with a calm settle usually converts cleaner and costs less CPU.

Below the fold

Use whileInView with once: true and a modest amount threshold. Prefer a single section reveal over nested staggers of twelve children. Disable heavy blur and large box-shadow animations; they are expensive and often look generic.

What to animate (and what not to)

• Safe: opacity, translate, scale (small), rotate (small)
• Risky: width/height, top/left, filter blur, continuous parallax on scroll
• Usually skip on mobile: mouse-follow magnets, large 3D tilts, looping background videos at high bitrate

Mobile lessons from shipping real landings

1. Test the device you pretend not to have. A flagship MacBook FPS graph lies. Use a mid-tier Android or an older iPhone.
2. Gate decorative motion behind idle and viewport. If the section is offscreen, do not run loops.
3. Prefer CSS for simple fades when you do not need orchestration. Framer Motion earns its keep for coordinated sequences and shared layout moments.
4. Images beat animated gradients as the main idea. Atmosphere can use gradients; the hero still needs a real visual anchor.
5. INP and input delay matter for CTAs. Do not run long JS work on first tap of “Start a project.”

Reduced motion is part of brand quality

Wire useReducedMotion (or a media query) so reduced-motion users get opacity-only or instant states. Keep focus rings strong. Never hide pricing or CTAs behind a sequence that never runs under reduced motion. Accessibility and conversion share the same rule: content must be available without the show.

Conversion-safe patterns I reuse

• Brand-led entrance: name and wordmark read before the headline finishes moving
• CTA stillness: primary button is stable after entrance; micro-interaction on hover/press only
• Proof without carnival: logos or work stills fade once; no marquee roulette
• Form honesty: validate inline; success motion is short confirmation, not confetti engines

On Vite marketing SPAs I often hydrate motion after first paint of critical HTML so crawlers and LCP stay clean. On Next.js App Router landings, keep motion in client islands and leave server-rendered copy intact.

Measuring landing page animation performance

Do not trust “it feels fine on my laptop.” Use a repeatable pass:

1. Throttle CPU (4x-6x) and network in DevTools; watch long tasks during first load
2. Record a Performance profile while the hero choreography runs; look for layout thrash
3. Scroll through below-fold sections once; confirm whileInView work is brief
4. Repeat with reduced motion enabled; confirm no large transforms remain
5. Field-check on a mid-range Android over cellular if the campaign cares about paid traffic

Track LCP element identity (usually hero image or headline), CLS near zero, and INP on the primary CTA. Motion libraries show up in JS weight; code-split them if the landing is mostly static copy.

Hero media choices that protect FPS

• Prefer a compressed still or short muted loop under a strict bitrate over a 4K background film
• Avoid animating large box-shadows and backdrop filters during entrance
• If you use 3D, treat it as progressive enhancement with a designed still fallback (see the accessibility guide)
• Never place detached badges or promo chips on top of hero media; they add both clutter and paint cost

Brand-first composition still wins: if the motion is louder than the name, cut the motion.

Team workflow: design timing before code timing

In Figma, note durations and easing in the handoff Spec. In React, map those notes to Framer Motion variants with a shared timing token object. When marketing and product share a monorepo, keep marketing flourishes out of the SaaS app shell so dashboards do not inherit a 700ms page fade.

Paid traffic and motion: what breaks ROAS

Campaign landings fail when the hero takes too long to become interactive, when CLS shifts the CTA under a thumb, or when a looping background video eats data plans. Keep ad-driven pages stricter than homepage brand playgrounds: shorter choreography, lighter media, clearer single CTA. If you A/B test motion, measure conversion and mobile bounce, not only aesthetic preference from the office Wi-Fi.

Also keep legal and trust links reachable without waiting on animation. Privacy and terms should never be motion-gated.

Motion budget table (copy into the brief)

If a proposed animation is not in the Allowed column, it needs a written exception and a mobile profile attached to the PR.

Failure modes that kill conversion

• LCP hostage: motion JS boots before hero image priority
• CLS on CTA: late webfont or badge shift moves the primary button
• INP spike: first tap runs a long task while a sequence is still scheduling
• Scroll jank: scroll-linked JS updating layout properties every frame
• Battery tax: offscreen canvas or video still decoding on mobile

Measure each failure mode with a named device and a before/after Performance panel capture. Preferences in Slack are not a substitute for a profile.

Launch-day motion checklist

1. Cold load on mid-range Android: hero readable under 2.5s on typical 4G throttle
2. Primary CTA tappable during or immediately after entrance (no 1s dead zone)
3. Reduced motion: still composition passes the brand-first test
4. No layout shift when webfonts swap; reserve sizes in CSS
5. Below-fold motion disabled until near viewport; paused when tab hidden
6. Framer Motion bundle not blocking critical HTML on Vite prerender or Next islands

Attach this list to the release PR. If any item fails, ship with motion reduced rather than shipping jank.

How this maps to studio work

Work on zaneone.one/portfolio uses Framer Motion for presence and hierarchy on marketing surfaces, with performance budgets checked on mobile. Whether the site is a Vite SPA with strong static SEO HTML or a Next.js product marketing layer, the rule is the same: motion supports the brand composition, it does not replace it. See services for design-and-build landing engagements.

Related reading: Figma to React handoff, accessibility for 3D, and Vite SPA vs Next.js.

FAQ

Does landing page animation hurt SEO or Core Web Vitals?

Motion itself is fine if LCP media is prioritized, main-thread work stays light, and CLS is near zero. Heavy JS animation libraries, layout thrash, and oversized hero video hurt LCP and INP. Animate opacity and transform, lazy-load below-fold motion, and measure on a mid-range phone.

What Framer Motion budget works for marketing pages?

Keep the first viewport to a short entrance choreography (brand, headline, CTA, hero), under roughly 600-900ms total, with staggered children only if each step is cheap. Prefer whileInView for lower sections with once: true. Skip continuous loops on mobile unless they are GPU-cheap and paused offscreen.

How should reduced motion be handled?

Respect prefers-reduced-motion: reduce. Swap long transitions for instant or near-instant opacity, disable parallax and large travel distances, and keep focus states clear. Never make critical content depend on an animation completing.

Should every landing section animate on scroll?

No. Scroll-triggered fades on every block feel like a template and cost battery. Animate the hero with intent, one or two proof sections with subtle reveals, and leave dense content static. One job per section beats motion noise.

Next step

Open your landing on a real phone, turn on reduced motion, and ask whether the brand still leads. Cut anything that only exists to look “alive.” If you want a motion pass with a performance budget baked in, reach out through contact.

Want this built for your product? Start a project with Zane, or explore shipped work, services, and more guides.