LAE

Lightweight Animation Engine

A powerful yet Incredibly tiny engine that can deilver high quality animations with a very simple setup and minmal cost.

Premium Quality

Delievers 3 Highly specilaized carefully curated Animations.

Total Control

Control Everything you're animation can do, the whole set is available.

Incredible Performance

With a CLS of Zero, an INP of less then 100ms, and no DOM mutation and an overall size of 4.51 KB, this engine is technically a ghost.

Animation Types:

Class Declarative

Text animation

This animation method delivers custom staggered text animation that is completely customizable with all of the attribute methods mentioned below

Class Declarative

Fade Animation

This animation method delivers a custom compound fade animation that can be edited with all the given attributes below

Class Declarative

Image Animation

This animation method delivers a custom compound Image animation that can be edited with all the given attributes below

Control:

Attribute

data-lae-delay

This attribute specifices how long an animation will be delayed until trigger, timer starts once the element is on screen. works on animation types

Attribute

data-lae-duration

This attribute specifices how long an animation takes from start to finish. works on all animation types

Attribute

data-lae-split

This attribute determines how the engine should split this text which there are three options (word , char , none) with word being the default meaning if this attribute wasnt declared the engine will result to the word split method, with none, not splitting the text at all. works only on text animatio method

Attribute

data-lae-angle

This attribute tells the engine to start animating the element from a specfic element

Attribute

data-lae-easing

this attribute tells the engine to set a custom cubic-bezier for this element

How to use:

Class Declarative

Text Animation

<h2 class="lae-text"> Demo Text </h2>

Class Declarative

Fade Animation

<h2 class="lae-fade"> Demo Text </h2>

Class Declarative

Text Animation

<div style="overflow: hidden">
....<img url="..." class="lae-image">
</div>

Attribute

Delay

<h2 data-lae-delay="miliseconds"> Demo Text </h2>

Attribute

Duration

<h2 data-lae-duration="miliseconds"> Demo Text </h2>

Attribute

Split

<h2 data-lae-split="either (char , word , none)"> Demo Text </h2>

Attribute

Easing

<h2 data-lae-easing="CSS cubic beizer input with out brackets"> Demo Text </h2>

Attribute

angle

<h2 data-lae-angle="left , top (any measurment could work)"> Demo Text </h2>

Incremental Refresh System:

This system works automatically by triggering a new event listener with the name of 'LAE-refresh' and to animate you're newly added content you of course need to give them their animation method when injecting or adding the content

Notes:

Note

Note 1

The animation auto handles text splitting meaning you could just write you're content in an h1 tag or in a span or any other type and the engine would handle it on its own, Keep in mind too, that its space senesitive so Do Not Add Any Extra Spaces

Note

Note 2

for image class, It accepts delay, and ease.

Note

Note 3

To properly animated image animations I'd prefer to put the image that would be animated in an overflow-hidden div

Note

Note 4

Its advised to not use 'transform: translate()' on elements that are animated since that would override the engine and instead use translateX , translateY. using the CSS property (scale) would also obstruct the engine

Installation:

Link core.js to you're primary HTML file

<script src="core.js"></script>

Link styles.css to you're primary HTML file

<link rel="stylesheet" href="styles.css" />

Visit on:

Github

Visit LAE on github