Clyune Component GalleryTimeline Scrub · How it works & code
Scrub timeline: Animation progress no longer plays automatically, instead follows the drag or scroll position. Move to where you want, and the animation goes there.
Runtime logic
Visiting `/gsap/scrub`, DemoHost lazy-loads `demos/kits/kit-gsap.js` (registry `mod: 'kit-gsap'`) and calls `mount(host, { variant: 'scrub' })`. mount resolves the variant to family `scrub`; `withControls` builds the control panel (6 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.save() — Saves the drawing state (transform, styles, clip); ctx.translate() — Translates the coordinate system; ctx.rotate() — Rotates the coordinate system; ctx.scale() — Scales the coordinate system; ctx.setLineDash() — Sets the dash pattern for strokes; ctx.stroke() — Strokes the current path; ctx.restore() — Restores the saved drawing state; ctx.fill() — Fills the current path; ctx.beginPath() — Starts a new path; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.fillText() — Draws filled text; ctx.moveTo() — Moves the pen without drawing; ctx.arcTo() — Adds an arc using tangent lines; ctx.closePath() — Closes the current sub-path
Source code
frontend/src/demos/kits/kit-gsap.js: FAM.scrub (L438-L455)
Code walkthrough
L438-455: Calls the factory `gFam()` to produce the full definition (spec + doc + build) from the options below. L438-438: Title shown in the info and control panels: “Timeline scrub”. L438-438: Range/default of the count slider. L438-438: Extra demo-specific slider/toggle: Scrub smoothness. L438-438: Range/default of the size slider. L438-438: Default main colour. L439-439: Help text of the count parameter. L439-439: Help text of the extra parameter. L439-439: Help text of the size parameter. L440-440: Preset buttons: name → parameter overrides (5). L441-441: Body of the “Notes” section. L442-442: Main formula of the “Formula” section. L442-442: Second formula line. L443-455: Per-frame draw function: draws with Canvas 2D `save`, `translate`, `rotate`, `scale`, `setLineDash`, `stroke` …; math via `Math.cos`, `Math.exp`, `Math.min`, `Math.round`, `Math.abs`; returns readouts `mode`, `cell` to the info panel.
Principles
Actual progress + = (target progress - actual progress) · (1 − e^(−Δt / scrub)) gsap.to(box, { x: 300, rotation: 360, scale: 1.5, scrollTrigger: { scrub: 0.6 } }) Scrub Drag Progress: Animations are no longer shown on time, but are directly controlled by a " progress value " , such as scrollbar positions or drag slides. When the scrub is set in numbers, it takes so many seconds for the actual progress to catch up with the target, and the picture won't go up and down. The hollow circle in the lower orbit is the target's progress, the solid circle is the actual progress and the dotted line frame is the target's position; the pointer can be moved around the image to drag the progress. There's no load here GSAP 库，而是用几十行代码复刻了它最核心的几个概念：补间（tween，从 A Smooth transition of value B Value, slow motion ease，Control the slow pace of transition, the time axis timeline，Sort multi-part patches in order) and staggered ( stagger，让一组元素依次出发）。每一帧都直接根据「当前时间」算出画面，所以拖动右侧滑条会立即看到变化。公式区给出了对应的 GSAP In writing, you can move directly to the real project.