Add animations, transitions, and progressive reveals to your presentations.
Fragment System
Use fragments to reveal content progressively:
tsx
import { Fragment } from "@reactslides/core";
<Slide>
<Heading>Progressive Reveal</Heading>
<Fragment index={1}>
<Text>This appears first</Text>
</Fragment>
<Fragment index={2}>
<Text>This appears second</Text>
</Fragment>
<Fragment index={3}>
<Text>This appears third</Text>
</Fragment>
</Slide>Animation Variants
tsx
// Fade in (default)
<Fragment animation="fade">Content</Fragment>
// Slide from direction
<Fragment animation="slide-up">Slides up</Fragment>
<Fragment animation="slide-down">Slides down</Fragment>
<Fragment animation="slide-left">Slides left</Fragment>
<Fragment animation="slide-right">Slides right</Fragment>
// Scale
<Fragment animation="scale">Scales in</Fragment>
// Custom
<Fragment animation="custom" className="my-animation">
Custom animation
</Fragment>