PixelZoomIn

Scales children from a starting scale factor to 1 with a fade-in animation.

  • Configurable duration, delay, easing, and start scale
  • Supports mount, hover, and view-based triggers
  • Respects prefers-reduced-motion automatically
  • Signals the end of its last iteration: onComplete (React), @complete (Vue), (complete) (Angular)
Status
stable
Category
animations
Since
v1.6.0

API

import { PixelZoomIn } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
children (required)React.ReactNode—Content to zoom in.
durationnumber320Animation duration in milliseconds. Default 320.
delaynumber0Animation delay in milliseconds. Default 0.
startScalenumber0.92Starting scale() factor. Default 0.92.
repeatnumber | 'infinite'1Iteration count: a number or 'infinite'. Default 1.
easingstring'cubic-bezier(.2,.9,.2,1)'CSS animation-timing-function. Default 'cubic-bezier(.2,.9,.2,1)'.
fillMode'none' | 'forwards' | 'backwards' | 'both''both'CSS animation-fill-mode. Default 'both'.
trigger'mount' | 'hover' | 'click' | 'focus' | 'inView' | boolean'mount'When the animation should play. Default 'mount'.
onComplete() => void—Fires after the final iteration.
classNamestring—Extra class names applied to the wrapping <div>.

ref points to <div>.

Accessibility

WCAG target: 2.1 AA

  • respects prefers-reduced-motion

Animation is suppressed when the user requests reduced motion.

Usage

import { PixelZoomIn } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelZoomIn>
      <div style={{ padding: 16, background: '#0EA5E9', color: '#fff', borderRadius: 8 }}>
        Zoom in content
      </div>
    </PixelZoomIn>
  );
}

Examples

Default

import { PixelZoomIn } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelZoomIn>
      <div style={{ padding: 16, background: '#0EA5E9', color: '#fff', borderRadius: 8 }}>
        Zoom in content
      </div>
    </PixelZoomIn>
  );
}

Custom Start Scale

import { PixelZoomIn } from '@pxlkit/ui-kit';

export function CustomStartScale() {
  return (
    <PixelZoomIn startScale={0.6} duration={500}>
      <div style={{ padding: 16, background: '#A855F7', color: '#fff', borderRadius: 8 }}>
        Bigger zoom from 0.6
      </div>
    </PixelZoomIn>
  );
}

Hover Trigger

import { PixelZoomIn } from '@pxlkit/ui-kit';

export function HoverTrigger() {
  return (
    <PixelZoomIn trigger="hover" repeat="infinite" duration={600}>
      <button style={{ padding: 12, background: '#111', color: '#fff', borderRadius: 6 }}>
        Hover me
      </button>
    </PixelZoomIn>
  );
}

Related