Components/Animated Slider16 / 25

Animated Slider

Code

// Each slide mounts/unmounts as `current` changes; AnimePresence animates
// the enter/exit. Directions swap based on nav direction (prev vs next).
const TRANSITIONS = {
  slide: {
    enter: { opacity: [0, 1], translateX: [80, 0] },
    exit:  { opacity: [1, 0], translateX: [0, -80] },
  },
  // fade, scale, fade-slide, flip follow the same enter/exit shape.
};

<AnimePresence mode="sync">
  <AnimePresenceChild
    key={current}
    enter={enter}
    exit={exit}
    duration={450}
    ease="outExpo"
  >
    <div>{children(items[current], current)}</div>
  </AnimePresenceChild>
</AnimePresence>

Carousel with crossfading slide transitions (slide, fade, scale, fade-slide, flip).

Live preview

Animated SliderPrev/next + dots

AnimateDeclarative tweens

Props

Name	Type	Default	Description
transition	'slide'\|'fade'\|'scale'\|'fade-slide'\|'flip'	'slide'	Enter/exit preset
enter	UseAnimeOptions	-	Enter keyframes (direction-aware)
exit	UseAnimeOptions	-	Exit keyframes (direction-aware)
duration	number	500	Transition ms
ease	string	'outCubic'	Easing (preview uses outExpo)
loop	boolean	true	Wrap around at edges
dots	boolean	true	Show nav dots
arrows	boolean	true	Show prev/next arrows

Related components

Accordion

Expand/collapse panels with height animation and single/multi open modes

Accordion (Presence)

Mount/unmount accordion panels with enter/exit cross-fade via AnimePresence

Counter & Countdown

Animated counter and countdown with padding and format options

ClipPath Reveal Reorder List

1	// Each slide mounts/unmounts as `current` changes; AnimePresence animates
2	// the enter/exit. Directions swap based on nav direction (prev vs next).
3	const TRANSITIONS = {
4	slide: {
5	enter: { opacity: [0, 1], translateX: [80, 0] },
6	exit: { opacity: [1, 0], translateX: [0, -80] },
7	},
8	// fade, scale, fade-slide, flip follow the same enter/exit shape.
9	};
10
11	<AnimePresence mode="sync">
12	<AnimePresenceChild
13	key={current}
14	enter={enter}
15	exit={exit}
16	duration={450}
17	ease="outExpo"
18	>
19	<div>{children(items[current], current)}</div>
20	</AnimePresenceChild>
21	</AnimePresence>