Image Reveal Animation Using GSAP Step By Step Part 2

Image Reveal Animation Using GSAP

GSAP, short for GreenSock Animation Platform, is a powerful JavaScript library for creating high-performance animations. To create a image reveal animation using GSAP, you can follow these steps:

Step 1:

The structure is organized as follows:

There’s an outer div with the class “outer-wrapper”, which acts as a container for all the image elements.
Inside this outer div, there are three inner divs with the class “image-wrapper”, each containing an image element.
Each image element is contained within a div with the class “image”.
The ‘src' attribute of each image element specifies the URL of the corresponding image file to be displayed.

HTML Markup: Start by creating the HTML structure for your image reveal animation. For example:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="outer-wrapper">
    <div class='image-wrapper'>
      <div class='image'>
        <img src='https://codewarrier.com/wp-content/uploads/2024/03/LimeWire-AI-Studio-Asset-2.jpg'>
      </div>
    </div>
    <div class='image-wrapper'>
      <div class='image'>
        <img src='https://codewarrier.com/wp-content/uploads/2024/03/LimeWire-AI-Studio-Asset-1.jpg'>
      </div>
    </div>
    <div class='image-wrapper'>
      <div class='image'>
        <img src='https://codewarrier.com/wp-content/uploads/2024/03/LimeWire-AI-Studio-Asset.jpg'>
      </div>
    </div>
</div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
</body>
</html>

Step 2:

This code is for styling image wrappers and images using CSS. Let’s break it down:

The .image-wrapper class is defined with some properties:
- It uses flexbox (display: flex;) to layout its children in a column (flex-direction: column;).
- justify-content: center; and align-items: center; center the content vertically and horizontally within the wrapper.
- It occupies the entire height of the viewport (height: 100vh;) and spans the full width of its container (width: 100%;).
- It’s positioned relatively (position: relative;).
The nth-child pseudo-classes are applied to the .image-wrapper class to style different wrappers differently:
- .image-wrapper:nth-child(1) has an orange background (background: #ff7e00;).
- .image-wrapper:nth-child(2) has a white background (background: #fff;).
- .image-wrapper:nth-child(3) has a greenish background (background: #00ff21;).
The img selector styles all <img> elements within the .image-wrapper:
- It sets the height and width to 100% of the parent container.
- object-fit: cover; ensures that the image covers its entire container while maintaining aspect ratio.
- transform-origin: left; sets the transformation origin to the left side.
The .image class is defined with the following properties:
- visibility: hidden; hides the image initially.
- position: relative; maintains the element’s position within the document flow.
- It’s set to occupy 80% of the width and height of its parent container.
- max-width: 500px; ensures the image doesn’t exceed 500 pixels in width.
- overflow: hidden; hides any content that overflows the container.

Overall, this code sets up image wrappers with different backgrounds and styles the contained images to fit within these wrappers while maintaining their aspect ratio.

CSS Styling:

				
					* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  position: relative;
}

.image-wrapper:nth-child(1) {
  background: #ff7e00;
}

.image-wrapper:nth-child(2) {
  background: #fff;
}

.image-wrapper:nth-child(3) {
  background: #00ff21;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform-origin: left;
}

.image {
  visibility: hidden;
  position: relative;
  width: 80%;
  height: 80%;
  max-width: 500px;
  overflow: hidden;
}

Step 2:

This code utilizes the GSAP (GreenSock Animation Platform) library, specifically the ScrollTrigger plugin, to create animations triggered by scrolling. Let’s break it down step by step:

gsap.registerPlugin(ScrollTrigger);: This line registers the ScrollTrigger plugin with GSAP, allowing the code to utilize the ScrollTrigger functionality.
let revealContainers = document.querySelectorAll(".image");: This line selects all elements with the class “image” from the HTML document and stores them in the revealContainers variable.
revealContainers.forEach((container) => {...});: This loop iterates over each element in revealContainers and executes the following code for each element.
Inside the loop:
- let image = container.querySelector("img");: It selects the img element within the current container and stores it in the image variable.
- let tl = gsap.timeline({ ... });: It creates a GSAP timeline (tl) with specific configuration options. The scrollTrigger option specifies that this timeline should be triggered by scrolling when the container element comes into view.
- tl.set(container, { autoAlpha: 1 });: It sets the CSS property autoAlpha of the container element to 1, making it fully visible.
- tl.from(container, 1.5, { ... });: It animates the container element over 1.5 seconds, moving it from left to right (xPercent: -100) with an easing effect defined by Power2.out.
- tl.from(image, 1.5, { ... });: It animates the image element over 1.5 seconds, moving it from right to left (xPercent: 100) and scaling it up (scale: 1.3) with an easing effect defined by Power2.out. The delay: -1.5 makes this animation start 1.5 seconds before the previous animation on the container ends.

Overall, this code creates animations for elements with the class “image” triggered by scrolling, with the container moving from left to right and the image moving from right to left while scaling up.

JavaScript Animation: Use GSAP to animate your image. Here’s an example:

				
					gsap.registerPlugin(ScrollTrigger);

let revealContainers = document.querySelectorAll(".image");

revealContainers.forEach((container) => {
  let image = container.querySelector("img");
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
      toggleActions: "restart none none reset"
    }
  });

  tl.set(container, { autoAlpha: 1 });
  tl.from(container, 1.5, {
    xPercent: -100,
    ease: Power2.out
  });
  tl.from(image, 1.5, {
    xPercent: 100,
    scale: 1.3,
    delay: -1.5,
    ease: Power2.out
  });
});