Scroll Reveal Magic: Transforming User Journeys with JavaScript Animation

Introduction -

As websites evolve to become more interactive, scroll animations have become a vital tool. With just 7 seconds to capture attention, ScrollReveal.js becomes your magic wand to enhance your web projects with style and engagement.

What is Scroll Reveal JavaScript?

Scroll reveal JavaScript is a library that allows you to animate elements on your website as they scroll into view.

How to use Scroll Reveal JavaScript

To use scroll reveal JavaScript, you first need to include the CDN of the library in your website. You can do this by adding the following code to your HTML.

<script src="https://unpkg.com/scrollreveal"></script>

How does Scroll Reveal JavaScript work?

Scroll reveal JavaScript works by listening to the scroll event of your website. When an element scrolls into view, the library will animate it according to the settings you have specified.

What are the benefits of using Scroll Reveal JavaScript?

There are many benefits to using scroll reveal JavaScript, including:

• It can add visual interest to your website.

• It can make your content more engaging.

• It is easy to use.

• It is lightweight.

• It is responsive.

Once you have included the library, you can start animating elements on your website. To do this, you need to add the data-sr attribute to the element you want to animate. The value of the data-sr attribute should be a JSON object that specifies the animation settings.

Example of a data-sr attribute

<h1 data-sr="delay: 200; duration: 500; easing: linear;">This is a heading</h1>

This code will animate the h1 element with a delay of 200 milliseconds, a duration of 500 milliseconds, and a linear easing function.

Here are some of the animation settings you can use with the scroll reveal library

• delay: The amount of time to wait before the animation starts.

• duration: The duration of the animation.

• easing: The easing function to use for the animation.

• from: The direction from which the element should appear.

• to: The final state of the element.

• distance: The distance from the top or bottom of the page at which the animation should start.

• mobile: Whether or not to disable the animation on mobile devices.

Basics Animation web page -

In this Animation, we simply create a webpage containing multiple pictures and apply animations to them.

Code Explanation -

👉🏻 ScrollReveal({ reset: true });

This sets the global behavior for animations. With reset: true, when an element reenters the viewport, its animation will reset, allowing it to animate again.

👉🏻ScrollReveal().reveal(".show-once", { reset: false });

This targets elements with the class .show-once. With reset: false, the animation won't reset when the element reenters the viewport, creating a one-time animation effect.

👉🏻 ScrollReveal().reveal(".title", { ... });

This targets elements with the class .title and applies the following animation:

• duration: The animation lasts for 3000 milliseconds (3 seconds).

• origin: "top": The animation originates from the top.

• distance: "400px": The element moves 400 pixels downwards.

• easing: "cubic-bezier(0.5, 0, 0, 1)": A specific easing function is applied for the animation.

• rotate: { x: 20, z: -10 }: The element rotates 20 degrees along the X-axis and -10 degrees along the Z-axis.

Example: A title element on a webpage can smoothly slide in from the top while slightly tilting, adding a dynamic touch to the design.

👉🏻 ScrollReveal().reveal(".fade-in", { ... });

This targets elements with the class .fade-in and applies the following animation:

• duration: 5000: The animation lasts for 5000 milliseconds (5 seconds).

• move: 0: The element doesn't move during the animation.

Example: A block of text can gradually fade in without any movement, providing a subtle yet eye-catching effect.

👉🏻 ScrollReveal().reveal(".scaleUp", { ... });

This targets elements within the class .scaleUp and applies the following animation:

• duration: 4000: The animation lasts for 4000 milliseconds (4 seconds).

• scale: 0.85: The element scales up to 85% of its original size.

Example: An image can smoothly grow in size to emphasize its importance when it enters the viewport.

👉🏻 ScrollReveal().reveal(".flip", { ... });

This targets elements with the class .flip and applies the following animation:

• delay: 500: The animation starts after a delay of 500 milliseconds.

• duration: 2000: The animation lasts for 2000 milliseconds (2 seconds).

• rotate: { x: 20, z: 20 }: The element flips with a 20-degree rotation along the X and Z axes.

Example: A card element can flip into view with a slight delay, adding an interactive and engaging effect.

👉🏻 ScrollReveal().reveal(".slide-right", { ... });

This targets elements with the class .slide-right and applies the following animation:

• duration: 3000: The animation lasts for 3000 milliseconds (3 seconds).

• origin: "left": The animation originates from the left side.

• distance: "300px": The element moves 300 pixels to the right.

• easing: "ease-in-out": The animation starts slowly, accelerates, and then decelerates.

Example: A content section can slide in from the left side of the screen, catching the user's attention.

👉🏻 ScrollReveal().reveal(".slide-up", { ... });

This targets elements with the class .slide-up and applies the following animation:

• duration: 2000: The animation lasts for 2000 milliseconds (2 seconds).

• origin: "bottom": The animation originates from the bottom.

• distance: "100px": The element moves 100 pixels upwards.

• easing: "cubic-bezier(.37,.01,.74,1)": A custom easing function is used.

• opacity: 0.3: The element becomes slightly transparent during the animation.

• scale: 0.5: The element scales down to 50% of its original size.

Example: A set of icons can elegantly slide up from the bottom, fading in and slightly shrinking, creating an interesting visual effect.

Conclusion -

As we conclude our mystical expedition into the arcane realm of Scroll Reveal animations, you stand as the adept of web enchantment. With a sprinkle of code and a dash of creativity, your websites shall radiate an aura of magic, leaving visitors in awe of your scroll-driven sorcery. Now, go forth and conjure digital marvels that would make even the most revered wizards nod in approval!