Animations
in-out
Fade Animation

Fade Animation

The Fade animation provides a smooth transition by gradually changing the opacity of an element.

Usage

To use the Fade animation, import it from react-swift-reveal:

App.jsx
import { Fade } from 'react-swift-reveal';
 
const App = () => {
  return (
    <Fade>
      <div className="box">
        This element will fade in as it enters the viewport.
      </div>
    </Fade>
  );
};

Props

The Fade animation accepts the following specific props:

PropTypeDescriptionDefault
contextbooleanWhether the element should travel a distance relative to its parent element.false

For Other common props, You can refer to the Swift Reveal Props documentation for a list of all available props.