allahisrabb's chronicle
Day 08/100 - Exploring ScrollReveal: A Guide to Easy Animation On Scroll

Day 08/100 - Exploring ScrollReveal: A Guide to Easy Animation On Scroll

Allahisrabb's photo
Allahisrabb
·

2 min read

Good day 👋.

Today is the eighth day of #100DaysOfCode. I worked tirelessly on my personal site. One of the biggest challenges I faced is Media query. You know, it's my personal website, I made sure it's so responsive that it is visible and accessible by a device of width, as low as 50px.

Without further ado, let's discuss ScrollReveal and how to use it. I promised to write an article on it.

Getting started with ScrollReveal

ScrollReveal is a lightweight JavaScript library that allows developers to animate HTML elements as they enter or leave the viewport. It's designed for adding dynamic animations to web pages.

How did I include it in my project - personal website? 👇.

I will use one element as an example 😊.

Following the documentation, I added the script tag to my html file. But I made sure it is written before my js file, because it will be accessed in my js file

<!-- html element -->
<img src="images/hello.png" alt="hello" class="welcome_image" />

<!-- scroll reveal -->
<script src="https://unpkg.com/scrollreveal"></script>

<!-- my js file -->
<script src="scripts/script.js"></script>

Accessing HTML elements and customizing my animation

// ScrollReveal offers a wide range of customization options. 
//You can specify the origin, distance, duration, 
//and easing of the animation
const reveal = {
 origin : 'left',
 delay   : 200,
 distance : '120px',
 easing  : 'ease-in-out',
duration : "2000"
};

ScrollReveal().reveal('.welcome_image', reveal);

HTML elements using the css selectors. Here, I accessed the element by the class name. In this case, the element comes in with ease from the left direction, 120px away from its original position, and that's after waiting for 200 milliseconds. And all these happens in just 2 seconds.

You can customize animation for multiple elements simultaneously. All you need to do is seperate the selections by comma (,).

  ScrollReveal().reveal(".about_details .a, .section_subtitle, .work_experience h2, .experience_title, .work_action .learn", { origin: "left" });
  ScrollReveal().reveal(".about_details .b, .work_action .started", { origin: "right", delay: "1000" });
  ScrollReveal().reveal(".about_details .d", { origin: "left", delay: "4000" });
  ScrollReveal().reveal(".about_details .f", { origin: "right", delay: "4000" });
  ScrollReveal().reveal(".about_details .e", { origin: "right", delay: "5000" });

Please visit the documentation for more examples and properties.

Please, reach out to me. I'm open to corrections 🙏.

God bless 🙏.

100DaysOfCode