const ring = parallel({
tint: track({ from: '#38bdf8', to: '#f472b6', duration: 1.4, ease: 'inOutSine' }),
scale: track({ from: 0.6, to: 1, spring: { stiffness: 190, damping: 12 } }),
})
await Root({
width: 200,
height: 200,
duration: ring.duration, // covers the longest member, whichever that is
fps: 24,
children: page => {
const { tint, scale } = ring.at(page)
return Box({ borderColor: tint, transform: { scale } })
},
})
Runs several animations at once and samples them together.
Two things a scene needs that a single track cannot give. One is a value per member from one call, so a builder reads
const { scale, tint } = ring.at(page)rather than sampling each by hand. The other is the length of the whole group: a render has to be told how long to be, and working that out by hand means aMath.maxover every track that has to be corrected every time one of them changes — silently producing a render that stops before its own animation does.Members keep their own delays, staggers and easings; this only gathers them.