AnimateZoom

Content arriving from the middle of where it will end up. The same arithmetic as AnimateGrow at more than twice the distance and always about the centre, for the one thing on a screen that is meant to interrupt.

import { AnimateZoom } from 'neba';

<AnimateZoom>
  <Statistic label="Uptime this quarter" value={99.98} unit="%" />
</AnimateZoom>;

Props

Prop	Type	Default	Description
from	number	0.4	The scale it starts from. Above 1 it arrives oversized and settles back, which reads as coming towards the reader
fade	boolean	true	Fades in as it zooms
staggershared	number	0	How long after one child the next one starts, in milliseconds. 0 animates the box itself; anything above it moves the effect onto each child in turn
durationStepshared	number	0	How much longer each successive child takes, in milliseconds. Negative speeds them up down the list, and never past zero
reverseshared	boolean	false	Runs the children from the last to the first. Only the order reverses
modeshared	'in' | 'out'	'in'	Whether the content arrives or leaves. out is the same animation run backwards, and it is held there
durationshared	number	340	How long one run takes, in milliseconds
delayshared	number	0	How long before it starts, in milliseconds
easing	string	—	The easing curve, as CSS writes it. Defaults to the house curve
repeatshared	number | 'infinite'	1	How many times it runs
alternateshared	boolean	false	Runs every other pass backwards, so a repeat returns instead of jumping
triggershared	'mount' | 'visible' | 'hover' | 'manual'	'mount'	What starts it. visible is on scrolling into view, hover is under the pointer (focus counts), manual is whatever play says
play	boolean	—	Runs it when trigger is manual. Each false → true starts it over
onceshared	boolean	true	With trigger="visible", whether it runs only the first time. Off, it runs again on every return
thresholdshared	number	0.2	With trigger="visible", how much of the element has to be on screen, from 0 to 1
pausedshared	boolean	false	Holds the animation where it is
render	useRender.RenderProp	—	Renders something other than a div (render={<section />}). Base UI's own escape hatch
children	ReactNode	—	What comes forward

Every other <div> attribute passes through to the root. The settings shared by every Animate* are defined in prop conventions.

There is no origin: a zoom anchored to a corner is a grow, and that is AnimateGrow.

Examples

from

The scale it starts at. Well below 1 it comes up out of nothing; above 1 it arrives oversized and settles back, which reads as coming towards the reader rather than up out of the page.

import { useState } from 'react';
import { AnimateZoom, Box, Button, Typography } from 'neba';

export default function AnimateZoomStrength() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex flex-col items-center gap-4">
      <Button size="sm" variant="outline" onClick={() => setRun((count) => count + 1)}>
        Play again
      </Button>

      <div className="flex flex-wrap items-center justify-center gap-3">
        {[0.1, 0.4, 1.8].map((from) => (
          <AnimateZoom key={`${from}-${run}`} from={from} duration={700}>
            <Box size="sm">
              <Typography level="caption">from {from}</Typography>
            </Box>
          </AnimateZoom>
        ))}
      </div>
    </div>
  );
}

trigger="visible"

The most common use of a zoom is a figure that lands as the reader reaches it. threshold is how much of the element has to be on screen first, from 0 to 1, and once (on by default) is what stops it replaying every time the page scrolls back.

import { AnimateZoom, Card } from 'neba';

export default function AnimateZoomVisible() {
  return (
    <div className="h-56 w-full max-w-sm overflow-y-auto">
      <div className="flex h-40 items-center justify-center text-sm text-(--neba-muted-fg)">
        Scroll down
      </div>

      <AnimateZoom trigger="visible" threshold={0.6} duration={600}>
        <Card title="Here it is" size="sm">
          It ran when six tenths of it was on screen, and only the first time.
        </Card>
      </AnimateZoom>

      <div className="h-40" />
    </div>
  );
}

mode

out drops it away again, held at the end.

<AnimateZoom mode="out" duration={240}>
  <Card title="Dismissed">This card is on its way out.</Card>
</AnimateZoom>

stagger

stagger, durationStep and reverse hand the effect to the children one at a time instead of running it on the box. They work the same way here as on AnimateFade, where they are set out in full.

Accessibility

• A reduced-motion preference switches the animation off entirely and the content is simply there, at full size.
• A strong zoom over a large area is the most likely effect in this set to bother a reader who is sensitive to motion. Prefer a small from, or a fade, for anything covering much of the viewport.