Elementor GSAP Image Reveal Tutorial | Create Stunning WordPress Animations [ Without Plugins ]

Looking to add eye-catching image reveal animations to your WordPress website using Elementor? This comprehensive tutorial will show you exactly how to implement professional GSAP image reveal effects without installing any additional plugins. By using the power of GSAP animation library directly within Elementor, you’ll create smooth, engaging animations that will make your website stand out while maintaining optimal performance.

What is GSAP Image Reveal Animation?

GSAP (GreenSock Animation Platform) is a powerful JavaScript animation library that allows you to create stunning animations for web elements.

These animations are particularly effective for:

• Portfolio websites
• Product showcases
• Landing pages
• Photography websites
• Creative agency websites

Code Snippet For This Tutorial:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/utils/gsap-utils.min.js"></script>

<style>
    .box { /* Targeting .box within this section */
  height: 600px;
  width: 400px;
  position: relative;
  overflow: hidden;
}

.myimg { /* Targeting .myimg within this section */
  height: 600px;
  width: 100%;
}

.uncover { /* Targeting .uncover within this section */
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  width: 100%;
}

.uncover_slice { /* Targeting .uncover_slice within this section */
  height: 600px;
  flex-grow: 1;
  background: #ffffff;
}
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    gsap.registerPlugin(gsap.utils);
    const slices = gsap.utils.toArray(".uncover_slice");
    const myImg = document.querySelectorAll(".myimg");;
    const animationContainer = document.querySelector(".animate-on-view"); // Target the container with the new class
    const tl = gsap.timeline({ paused: true }); // Initially pause the timeline

    tl.addLabel('start');

    tl.to(slices, 1 , {
      height : 0 ,
      ease: 'power4.InOut',
      stagger : { amount : 0.99 }
    } , 'start')
    .to(myImg, 1.2 , {
      scale: 1.5 ,
      ease: 'power4.InOut',
    } , 'start');

    // Intersection Observer setup
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          tl.play(); // Play the animation when the container is in viewport
          observer.unobserve(animationContainer); // Stop observing after animation starts (play once)
        }
      });
    }, {
      threshold: 0.3 // Trigger when 10% of the container is visible
    });

    observer.observe(animationContainer); // Start observing the container
  });
</script>

Note:

Option 1: Site-Wide Implementation:
Add the complete code snippet to Elementor’s Custom Code section, placing it at the end of the body tag. Make sure to specify which pages should display the animation by selecting them in the “Display On” settings. This method is ideal if you plan to use the effect across multiple sections of your website.

Option 2: Section-Specific Implementation:
Alternatively, you can add the code directly within an HTML widget in the Elementor editor. Simply place the HTML widget immediately after your image reveal section. This approach provides more granular control and is recommended when you only need the animation in specific sections of a page.

Both methods will achieve the same visual effect, so choose the one that best aligns with your website structure and animation needs.

1-Click Import: Image Reveal GSAP Elementor Template

Get It For Free on

Conclusion

Creating stunning GSAP image reveal effects in Elementor without plugins is a powerful way to enhance your website’s visual appeal. By following this tutorial, you’ve learned how to implement various reveal animations, customize them to suit your needs, and ensure they work responsively across all devices.

If you want to enhance your website’s functionality further, you can use Crocoblock. It is an all-in-one toolkit for WordPress that includes over 18 plugins and hundreds of pre-designed templates and blocks. With Crocoblock, you can add advanced functionality to your website, such as dynamic post types, custom fields, and popups.

FAQs