/fec-motion-interaction

name: fec-motion-interaction
description: Use when designing, implementing, or reviewing frontend interaction motion, page transitions, scroll animation, Framer Motion, GSAP, Lottie, CSS animation, motion intensity, animation performance, reduced-motion behavior, or cinematic but accessible UI motion. Do not use for SVG-only path drawing, Canvas/WebGL rendering, or ordinary hover states; Chinese triggers include motion design, interactive effects, page transitions, scroll animation, Framer Motion, GSAP.

Interactive effects

It is suitable for front-end animation tasks that need to design page transitions, scrolling narratives, component introductions, micro-interactions and feedback rhythms into maintainable, degradable and verifiable forms. Load [motion-patterns.md](references/motion-patterns.md) when a specific implementation pattern is required.

Purpose

Choose the right animation tools, intensity, and quality gates for your front-end interface.

Procedure

1. Determine animation responsibilities

• First write down the user intention of the dynamic effect service: positioning, feedback, level changes, status confirmation, narrative guidance or brand memory.
• The tool-based interface is restrained by default, and priority is given to ensuring scanning efficiency; the marketing page and work page can increase the rhythm, but cannot block the main information.
• If animation is merely decorative and does not improve understanding, feedback or brand recognition, it should be deleted or replaced with a static visual treatment.
• Loading, skeleton, toast, error prompts and success feedback belong to status communication; animations can only enhance the feedback rhythm and cannot replace text, semantics or visible status.

2. Choose a technical route

• CSS transitions/keyframes: hover, focus, toast, simple entry and small status feedback.
• Framer Motion: React state-driven, layout transitions, list orchestration, and interruptible component-level animations.
• GSAP: timelines, scroll triggers, complex sequences and precise orchestration across elements.
• Lottie: The icon or empty state animation output by the design tool is lazy loaded on demand.
• CSS scroll-driven animation: Use when progressive enhancement is acceptable and legacy browser consistency is not required.

3. Define intensity levels

• Level 1-2: Only uses 150-250ms opacity/transform, suitable for background, forms and high-frequency tools.
• Level 3-4: Add short stagger, partial spring and lightweight reveal, suitable for dashboards, settings pages and management consoles.
• Level 5-6: Add parallax, layout morph, and pointer response, suitable for product display and interactive homepage.
• Level 7+: To use scrolling narrative, fixed paragraphs or 3D/WebGL cooperation, the mobile version and reduced-motion downgrade must be done separately.
• Scenario default values: public services, medical, financial and highly accessible products start from Level 1-2; SaaS tools and data backends start from Level 2-3; marketing pages, brand pages and portfolios can start from Level 4-6; only experimental activity pages or immersive narratives can consider Level 7+.
• If the UI design process already has a motion intensity dial set up, use that dial; don’t automatically increase the intensity just because a certain motion library is introduced.

4. Establish performance boundaries

• Only high-frequency animations `transform`, `opacity`, use `filter` and `clip-path` with caution.
• GSAP, Lottie, Three.js, heavy animation components must be dynamically imported or isolated in leaf components.
• Sustained animations require pause conditions: invisible, tab hidden, user closed, low battery, or reduced motion.
• Do not read and write layout synchronously on scroll events; use IntersectionObserver, ScrollTimeline, or throttled rAF.
• Scroll narrative, stagger, spring, magnetic pointer and parallax effects must have clear responsibilities respectively; do not stack multiple high-intensity motion languages on the same screen at the same time.
• The rhythm of repeated reveal animations on long pages must be controlled to avoid each block entering with the same delay, direction, and easing, causing a template feel and scrolling fatigue.

5. Design for accessible degradation

• All non-essential motion effects read `prefers-reduced-motion` and downgrade to static, fade-in or instant state.
• If the automatic playback or looping animation exceeds 5 seconds, a pause method should be provided or it should only run in local non-critical areas.
• Do not flash more than 3 times per second; do not use animation as the only status reminder.
• The focus ring, error prompt, and success feedback must be equally clear when there is no animation.
• Gesture animations must be replaced by clicks, keyboards, or explicit controls; dragging, sliding, and long-pressing cannot be the only operation paths.

6. Verify delivery

• Check whether the animation blocks the copy, button or table content at 375px, 768px, and 1440px.
• Check whether the first loaded bundle is significantly bloated by the animation library.
• Turn on reduced motion manually and confirm that the animation is disabled or weakened.
• Confirm scrolling and key interactions without noticeable frame drops using the performance panel or actual device.
• Check that the animation intensity matches the page type: the workbench should not have a marketing-style scrolling theater, and the portfolio should not only have a default hover fade-in.
• Verify that scroll trigger sequences allow users to reach content quickly without losing context due to pinned blocks, long timelines, or uninterruptible transitions.

Constraints

• Do not mix Framer Motion and GSAP controls for the same element within the same component.
• Don’t use animations to cover up missing statuses such as loading, empty, error, disab