LINK THE JS CDN
Inside the header tags
<script src="https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/loadless.min.js" defer script></script>
PARENT ATTRIBUTE
The parent div needs to have a data-loadless-parent attribute
<div data-loadless-parent></div>
PAGE ATTRIBUTE
To let the library know what is a page or a modal, the div needs to have the attrbiute
data-page = "number or word"
<div data-page = "1"></div>
LOAD ATTRIBUTE
To switch between pages and activate modals, the triggering button or link needs to have a
data-loadless-btn="value of the page" attribute
<div data-loadless-btn="1"></div>
LINK THE CSS CDN
Inside the header tags
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/animations.css">
ANIMATE ATTRIBUTE
Give the tag a data-animate = "animation name" attribute
<h1 data-animate = "left"></h1>
ANIMATION CLASS
Give the tag a class of the animation class = "animate-AnimationName" attribute
<h1 data-animate = "left" class = "animate-left"></h1>
ANIMATION LIST
top
left
bottom
right
fadein