Easely.js is a simple tool designed to help you add professional animations to your website without writing complex JavaScript.
Copy and paste these lines into your HTML file just before the closing </body> tag.
"Perfect for personal portfolios and freelance projects."
<!-- 1. Load GSAP & ScrollTrigger (Required) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<!-- 2. Load Easely.js v1.0.5 -->
<script src="https://cdn.jsdelivr.net/npm/@pstarz7/easely@1.0.5/dist/easely.umd.js"></script>
<!-- 3. Initialize the Magic -->
<script>
window.addEventListener('load', () => {
Easely.init({
duration: 1.5,
ease: "power4.out"
});
});
</script>Live demonstration of looping presets.
Smoothly fades in from 0% to 100% opacity.
Starts blurry and clear up (Premium aesthetic).
Slides up from the bottom into position.
Slides down from the top into position.
Scales up from a small size to normal.
Fine-tune your motion with these attributes.
| Attribute | Value | Description |
|---|---|---|
data-ez-duration | number | Animation length in seconds (e.g. 2) |
data-ez-delay | number | Wait time before start (e.g. 0.5) |
data-ez-scroll | true | Animate only when visible in viewport |
data-ez-start | string | Trigger position (e.g. top 80%) |
data-ez-scrub | number | Tie motion to scroll speed (Parallax) |
data-ez-stagger | number | Delay between child elements |
data-ez-once | false | Repeat animation every time you scroll |
Add this to your CSS to prevent elements showing before JS loads:
[data-ez] { opacity: 0; }Use custom start positions to move the trigger point higher:
data-ez-start="top 60%"