Motion kit

Components and helpers 16

The kit includes 12 motion components and four helpers. It honours reduced motion and pauses loops off-screen.

• digitRoller

  Rolls individual digits into place to reveal a value.

• countUp

  Animates a number from a starting value to its target.

• staggerReveal

  Reveals a group of elements one after another as they enter view.

• popIn

  Brings elements into view with a small scaling pop.

• drawOn

  Reveals an SVG path as though it is being drawn.

• growBars

  Grows chart bars upward from their base.

• ticker

  Moves a repeating strip of content horizontally.

• springPills

  Moves the selected highlight between pill tabs with a spring.

• magnetic

  Lets an element follow the pointer with a magnetic pull.

• scrollStack

  Stacks panels as the page scrolls.

• shaderGlow

  Creates an animated shader glow using the kit’s colour variables.

• ballDrum

  Runs a 3D draw drum using a supplied three.js instance.

• MK

  Tracks reduced-motion preferences and lets a page set reduced motion.

• cssColor

  Reads a CSS colour variable as RGB values.

• loopWhenVisible

  Runs an animation loop while its element and the page are visible.

• onceVisible

  Calls a function once when an element first enters view.

Demo labs 2

• Lab 1 · Reveal, filter & scroll

  Digit reveals, staggered results, spring filters, a ticker and a scroll stack.

• Lab 2 · Drum, charts & light

  A 3D draw drum, self-drawing charts and shader light.