Scrambled Text

Shoora UI

Customize Fade Content

Duration1000ms
Initial Opacity0

Props

PropertyTypeDefaultDescription
childrenReact.ReactNode-The content to be animated.
blurbooleanfalseEnables a blur effect during the animation.
durationnumber-Specifies the duration of the fade animation in seconds.
delaynumber0Adds a delay in seconds before triggering the animation.
easestringpower2.outGSAP easing function for the fade animation.
thresholdnumber-IntersectionObserver threshold for triggering the fade animation.
initialOpacitynumber-The starting opacity of the component before it enters the viewport.
classNamestring-Custom class(es) to be added to the container.
disappearAfternumber-Time in seconds after which the content will start to disappear. Disables if set to 0.
disappearDurationnumber-Duration of the disappearance animation in seconds.
disappearEasestringpower2.inGSAP easing function for the disappearance animation.