Simple.js actually isn't a requirement to use the Simple.js animation extension, it is recommended though. Below you'll find the script tags to include for both the normal library and the animation extension.

<script src="https://cdn.jsdelivr.net/gh/kgsensei/[email protected]/simple.min.js"></script> <!-- Normal Library -->

<script src="https://cdn.jsdelivr.net/gh/kgsensei/[email protected]/addon/simple.anim.min.js"></script> <!-- Animation Extension JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kgsensei/[email protected]/addon/simple.anim.min.css"> <!-- Animation Extension CSS -->

Fade in an element.

gid("example_id").fadeIn(200) // Will fade in #example_id for a duration of 200ms

Fade out an element.

gid("example_id").fadeOut(200) // Will fade out #example_id for a duration of 200ms

Delay a fade in for 1s

gid("example_id").delay(1000).fadeIn(200)

Delay a fade out for 1s

gid("example_id").delay(1000).fadeOut(200)

At the end of every animation function is an optional callback function

gid("example_id").fadeIn(200, () => {
    console.log("Faded In!") // This will log after 200ms when the animation is finished
})

You can also use them with delays for the same effect

gid("example_id").delay(1000).fadeOut(200, () => {
    console.log("Faded Out!") // This will log after 1200ms when the animation is finished
})