Add Smooth Scroll Animations To Elements With ScrollAnimate.js

Preview:

Description:

ScrollAnimate.js is a lightweight JavaScript library that allows developers to add custom scroll-based animations to any DOM elements easily. Ideal for portfolio websites, dynamic landing pages, and personal blogs.

By setting HTML5 data attributes, elements can be animated into view through fades, slides, scales, and more as users scroll down the page. This results in smooth, modern animated effects that engage visitors and bring websites to life.

How to use it:

1. Start by loading the ScrollAnimate.js and ScrollAnimate.css files in the document.

<link rel="stylesheet" href="ScrollAnimate.css" />
<script src="ScrollAnimate.js"></script>

2. The animations are defined through the following HTML data-* attributes, giving developers precise control over types, durations, delays, and easing modes.

• data-animated-section: Parent container
• data-animated-item: Element to animate on scroll
• data-animation: Animation type: fadeIn, scaleUp, slideLeft, slideRight, slideDown
• data-duration: Duration of the scroll-triggered animation
• data-delay: Time to wait before triggering the animation
• data-easing: Easing function

<div data-animated-section>
  <div 
    data-animated-item 
    data-animation="scaleUp" 
    data-duration="0.5s" 
    data-delay="0.3s" 
    data-easing="ease-in-out">
    Element To Animate On Scroll
  </div>
</div>