MotionZoom

Een afbeelding die vanaf haar plek naar volledig scherm zoomt; sleep haar weg om te sluiten.

WebReact NativeOverlays

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

App.jsx

import { MotionZoom, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

// Small generated landscapes, so the example needs no image files.
function landscape(sky, hill, sun) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
    <rect width="300" height="200" fill="${sky}"/>
    <circle cx="220" cy="62" r="26" fill="${sun}"/>
    <path d="M0 150 Q80 90 160 140 T300 120 V200 H0Z" fill="${hill}"/>
    <path d="M0 175 Q110 130 200 170 T300 160 V200 H0Z" fill="#0e2e24"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

const photos = [
  landscape('#eaf6f0', '#43c58f', '#ffffff'),
  landscape('#cfe8dc', '#176b52', '#f4faf7'),
  landscape('#176b52', '#2e8f6d', '#eaf6f0'),
  landscape('#f4faf7', '#2e8f6d', '#43c58f'),
  landscape('#0e2e24', '#176b52', '#43c58f'),
  landscape('#43c58f', '#176b52', '#ffffff'),
];

export default function App({ margin = 24, radius = 14, spring = 'default' }) {
  return (
    <div className="stage">
      <div className="grid">
        {photos.map((photo) => (
          <MotionZoom
            key={photo}
            src={photo}
            width={300}
            height={200}
            margin={margin}
            transition={motionTokens.spring[spring]}
            style={{ borderRadius: radius }}
            className="photo"
          />
        ))}
      </div>
      <p className="hint">Click a photo. Drag it away, click or press Escape to close.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  cursor: zoom-in;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Kortste gebruik

Photo.jsx

<MotionZoom
  src={photo.thumb}
  zoomSrc={photo.full}
  width={240}
  height={160}
  style={{ objectFit: 'cover', borderRadius: 12 }}
/>;

Wat het voor je regelt

Een klik, Enter of spatie zoomt de afbeelding vanaf waar ze staat tot ze het scherm vult binnen margin.
De ingezoomde kopie begint precies zoals de miniatuur eruitziet, met de object-fit-uitsnede en hoekradius.
zoomSrc fadet in zodra hij is geladen.
Een klik, Escape of wegslepen sluit haar; een snelle worp sluit ook, en een korte sleep veert terug.

Gebruik het voor

Een fotoraster.
Een productgalerij.
Afbeeldingen in een blogpost.

Props

Prop	Type	Standaard	Beschrijving
`src`	`string`		De afbeelding die op haar plek wordt getoond.
`zoomSrc`	`string`		Een grotere afbeelding die wordt getoond zodra ze is geladen; houd dezelfde beeldverhouding.
`margin`	`number`	`24`	Ruimte rond de ingezoomde afbeelding in pixels.
`disabled`	`boolean`	`false`	Zet zoomen uit.
`onZoomChange`	`(zoomed) => void`		Draait met `true` bij inzoomen en `false` bij sluiten.
`backdropStyle`	`CSSProperties`		Inline style voor de achtergrond.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

De overlay bestaat alleen tijdens het zoomen (op het web een dialog in de bovenste laag), dus de afbeelding kan overal staan, zelfs in een alinea. Andere props gaan naar de img.

Geef in React Native source en zoomSource mee; de overlay is een transparante Modal.

Gebruikt in deze voorbeelden

FotofeedVeeg door foto's, spring via miniaturen, open elke foto op volledig scherm en trek de details omhoog.MotionPagerMotionHighlightMotionZoomMotionSheet