---
title: "JavaScript Basic Animations"
description: "This section introduces a collection of basic JavaScript animations, including slide left, slide right, slide bottom, slide top, fade in, and fade out. These animations are part of the jSuites.animation library, designed to enrich user interfaces with smooth and visually appealing effects."
source: https://jsuites.net/docs/animations
---
The `jSuites.animation` library incorporates several straightforward animations to enhance the user experience. These include:
- fadeIn
- fadeOut
- slideLeft
- slideRight
- slideTop
- slideBottom
## Example
### Fade In and Fade Out Animations
Below is an example demonstrating how to implement fadeIn and fadeOut animations:
```html
Content is here
```
```jsx
import jSuites from "jsuites"
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'
function App() {
const content = useRef(null);
const handleToggleAnimation = function () {
let button = content.current
if (button.style.display == 'none') {
jSuites.animation.fadeIn(button, function () {
// Callback to do something when animation is finished
});
} else {
jSuites.animation.fadeOut(button, function () {
// Callback to do something when animation is finished
});
}
}
return (