Results for “spring-animations”

16 skills

Translates Apple's fluid interface design principles—spring animations, direct manipulation, interruptibility, and velocity handoff—into web implementations using CSS, Pointer Events, and spring libraries like Motion/Framer Motion.

More results

emil-design-eng-2

Provides design engineering guidance focused on animation principles, UI review, and interface craftsmanship.

hyperframes-keyframes

Creates seek-safe 2D/3D keyframe animations using GSAP, CSS, Anime.js, WAAPI, FLIP, SVG morph/draw, and text trails for HyperFrames compositions.

hyperframes-animation

Provides atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU) for composing animations with HyperFrames.

motion-patterns

Provides copy-paste animation patterns for React and Next.js, including buttons, modals, toasts, stagger lists, page transitions, scroll reveals, and layout animations, all built on motion-foundations tokens.

remotion-markup

Guidance for writing Remotion React markup with animation patterns, media handling, sequences, effects, and advanced features like 3D, audio visualization, and parameterized videos.

sprite-animation

Creates educational single-frame posters with pixel art mascots and kinetic typography using pure CSS keyframe animations, no JavaScript required.

Creates a hero frame with looping CSS animations including a rotating type ring, animated globe, ticking timer, and parallax labels.

gsap-framer-scroll-animation

Build scroll animations, parallax effects, pinned sections, and scroll-triggered reveals using GSAP ScrollTrigger or Framer Motion in vanilla JS, React, or Next.js.

36.2k · bundle

gsap-scrolltrigger

Create scroll-driven animations with pinning, scrubbing, and trigger-based timelines using GSAP ScrollTrigger.

Animate DOM and SVG elements with GSAP's core engine: tweens, easing, staggers, transforms, and responsive matchMedia.

motion-advanced

Build complex, interactive animations in React/Next.js including drag-and-drop, gestures, text animations, SVG path drawing, custom hooks, and imperative sequences.

Add scroll animations, micro-interactions, or page transitions to a component using GSAP, with reduced-motion support and performance best practices.

Creates Apple-style soft UI prototypes with squircle cards, spring motion, and ambient mesh backgrounds.

Apply named StyleSeed motion to React components using framer-motion, with personality seeds and keyword moves from a motion library.

emil-design-eng

Encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.