Timelines and control

Sequence targets

import { stagger, timeline } from "@scorpion7slayer/hyper-flow";

const intro = timeline([
  {
    target: ".title",
    options: { preset: "smooth-rise", duration: 620 },
  },
  {
    target: ".pixel",
    at: "<",
    options: {
      preset: "pixel-pop",
      delay: 120,
      stagger: stagger(44, { from: "center" }),
    },
  },
  {
    target: ".actions",
    options: { preset: "smooth-scale", duration: 420 },
  },
]);

at: "<" starts a step at the same time as the previous step. A numeric at value is an absolute offset in milliseconds. Without at, the next step begins after the current cursor.

Control a flow

flow() and timeline() return the same controller:

intro.pause();
intro.play();
intro.reverse();
intro.speed(0.8);
intro.progress(0.5);

await intro.finished;

Method	Behavior
`play()`	Plays every managed animation
`pause()`	Pauses every managed animation
`reverse()`	Reverses each animation from its current time
`cancel()`	Cancels and removes applied animation effects
`finish()`	Moves every animation to its end state
`progress(value?)`	Reads or writes normalized progress from 0 to 1
`speed(value?)`	Reads or writes playback rate

Start on intersection

import { inView } from "@scorpion7slayer/hyper-flow";

const stop = inView(
  ".feature",
  { preset: "smooth-rise", stagger: 45 },
  { threshold: 0.3, once: true },
);

stop();

inView() uses IntersectionObserver. The returned cleanup function disconnects the observer. If the API is unavailable, Hyper Flow runs the animation immediately.