--- title: Motion and Animation: Timing, GSAP, Scroll description: Easing, duration and choreography treated as engineering decisions, because motion that does not explain something is just latency with a curve on it. canonical: https://www.hire-web-dev.com/stack/motion/ section: Stack updated: 2026-09-11 author: SumanKumar Phuyal site: hire-web-dev.com note: >- Generated from the page of record at the canonical URL above. The four case studies are placeholder work and their metrics were never measured; imagery is AI-generated concept art. See https://www.hire-web-dev.com/disclosure/. --- # MOTION — TIMING GSAP when a project needs a timeline and a team that can maintain it. A hand-written loop when I need exact control. The interesting decisions are about timing, not about which library. ## What library to use CSS transitions for state changes — hover, focus, open and closed. They're declarative, the browser can often run them off the main thread, and they cost nothing to ship. GSAP when a sequence needs orchestration, because a timeline you can scrub, reverse and label is worth real money on a project with several people maintaining it. A hand-written requestAnimationFrame loop when I need a value computed per frame from scroll position or pointer velocity. This site uses the third option throughout: a single loop that reads layout, then writes, in that order. Interleaving reads and writes forces synchronous layout repeatedly and is the most common cause of animation that stutters for no visible reason. ## Timing is the actual craft Two hundred milliseconds for something small and local. Three to five hundred when an element travels or changes size meaningfully. Ease-out for things entering, because they should decelerate into place; ease-in for things leaving. Anything over six hundred milliseconds on a frequently repeated interaction becomes an obstacle by the twentieth use, no matter how pleasant it felt in review. The test I apply: if the motion were removed, would the interface be harder to understand? If yes, it's doing work. If no, it's decoration, and decoration has a cost paid by everyone who uses the thing daily. ## Reduced motion A designed alternative, not a switch that disables everything. Usually that means instant state changes plus a short opacity fade, keeping the sense of change without movement. Building it last is how it ends up feeling like a punishment. Two notes go further than this page does: motion that means something, on when an animation earns its place, and accessible motion, on building a reduced-motion variant worth shipping. ## Key facts - Tools: GSAP / rAF / CSS - Default: CSS where possible - Custom loop: When frame-exact - Always: Reduced-motion path ## Timing - Small, local: ~200 ms - Travel / resize: 300 — 500 ms - Entering: Ease-out - Leaving: Ease-in ## Topics GSAP, REQUESTANIMATIONFRAME, CSS TRANSITIONS, EASING, PREFERS-REDUCED-MOTION ## Image ![Ribbon of liquid chrome and cyan curling through black space, easing curves made visible as a physical form](https://www.hire-web-dev.com/assets/img/motion-design-liquid-chrome-ribbon.jpg)