Simple.js Ext: Animation Docs


Setup/Installation

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://dev.kgsensei.dev/simple.min.js"></script> <!-- Normal Library -->

<script src="https://dev.kgsensei.dev/simple.animExt.min.js"></script> <!-- Animation Extension JS -->
<link rel="stylesheet" href="https://dev.kgsensei.dev/simple.animExt.min.css"> <!-- Animation Extension CSS -->

Animating

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

Delays

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)

Callbacks

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
})