Documentation
Base
Models
Animation

Animation

You can choose the type of animation when the user opens or closes the viewer component.

Smart

JS-Animation that tries recognize rectangle of Preview component into opening story and creates CSS-in-JS "pulse" animation. If you are overestimating performance on older or mobile devices, you should not use this value.

Features

  • Recognizes the bounding box of the Preview component.
  • Creates a "pulse" animation effect using CSS-in-JS.
  • Suitable for modern devices with better performance.

Usage

<InstaStories config={{ animation: "smart" }}>
  {...configurable}
  {...stories}
</InstaStories>

Demo

Linear

Animation based only on CSS styles by step-by-step animation. Prevent JS recognizing rectangle of Preview component.

Features

  • Utilizes pure CSS for animations.
  • Simpler and more performance-friendly compared to smart animation.
  • Ideal for applications where simplicity and performance are prioritized.

Usage

<InstaStories config={{ animation: "linear" }}>
  {...configurable}
  {...stories}
</InstaStories>

Demo

Immediately

Prevent all JS and CSS logics when user opens/closes viewer.

Features

  • No animations or transition steps, providing the fastest viewer opening experience.
  • Best for devices where performance is a critical factor.
  • Ensures minimal overhead when interacting with stories.

Usage

<InstaStories config={{ animation: "immediately" }}>
  {...configurable}
  {...stories}
</InstaStories>

Demo

usePaginationEvent