PixelSlideIn

Translates children in from one of four edges with configurable distance, duration, and trigger.

Slide from up, down, left, or right edges
Mount, hover, click, or in-view triggers
Configurable duration, delay, distance, easing, and fill-mode
Iteration count supports finite or infinite repeats
Respects prefers-reduced-motion automatically

Status: stable
Category: animations
Since: v1.6.0

API

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

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`	—	Content to slide in.
`from`	`'up' \| 'down' \| 'left' \| 'right'`	`'down'`	Edge to slide from. Default `'down'`.
`duration`	`number`	`350`	Animation duration in milliseconds. Default `350`.
`delay`	`number`	`0`	Animation delay in milliseconds. Default `0`.
`distance`	`number`	`10`	Translate distance in pixels. Default `10`.
`repeat`	`number \| 'infinite'`	`1`	Iteration count: a number or `'infinite'`. Default `1`.
`easing`	`string`	`'ease'`	CSS `animation-timing-function`. Default `'ease'`.
`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.
`className`	`string`	—	Extra class names applied to the wrapping `<div>`.

ref points to <div>.

WCAG target: 2.1 AA

prefers-reduced-motion

Animation is suppressed when the user prefers reduced motion.

Usage

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

export function Default() {
  return (
    <PixelSlideIn>
      <div style={{ padding: 16, background: '#111', color: '#fff' }}>
        Slides in from below on mount
      </div>
    </PixelSlideIn>
  );
}

Examples

Default

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

export function Default() {
  return (
    <PixelSlideIn>
      <div style={{ padding: 16, background: '#111', color: '#fff' }}>
        Slides in from below on mount
      </div>
    </PixelSlideIn>
  );
}

From Left

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

export function FromLeft() {
  return (
    <PixelSlideIn from="left" duration={500} distance={20}>
      <div style={{ padding: 16, background: '#0EA5E9', color: '#000' }}>
        Slides in from the left
      </div>
    </PixelSlideIn>
  );
}

On Hover

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

export function OnHover() {
  return (
    <PixelSlideIn trigger="hover" from="right" duration={300}>
      <div style={{ padding: 16, background: '#222', color: '#0EA5E9' }}>
        Hover to slide in from the right
      </div>
    </PixelSlideIn>
  );
}

Related