MIND-BLOWING Elementor Scrolling Effects You Need To Know

Do you want to add smooth scroll animations to your Elementor website? With GSAP ScrollTrigger, you can create awesome animations that activate when users scroll—no Elementor Pro required!In this guide, I’ll show you how to add a ScrollTrigger animation in Elementor step by step. Let’s get started!

Table of Contents

Introduction

Do you want to add smooth scroll animations to your Elementor website? With GSAP ScrollTrigger, you can create awesome animations that activate when users scroll—no Elementor Pro required!

In this guide, I’ll show you how to add a ScrollTrigger animation in Elementor step by step. Let’s get started!

What is GSAP ScrollTrigger?

GSAP (GreenSock Animation Platform) is a powerful tool for creating smooth animations. ScrollTrigger is a GSAP plugin that allows you to animate elements when the user scrolls.

Why Use GSAP ScrollTrigger in Elementor?

✅ Works with the free version of Elementor
✅ Adds modern scroll animations
✅ Lightweight and fast (no extra plugins needed)
✅ Can be used for text, images, and sections

Step-by-Step Guide to Adding GSAP ScrollTrigger in Elementor

Step 1: Create Your Elementor Layout

  1. Open your Elementor editor and create a new section.
  2. Add a container (name it “Main Wrapper”).
  3. Set the container’s width to full and height to 400VH for scrolling space.

Step 2: Add a Sticky Container

  1. Inside the Main Wrapper, add another container (name it “Sticky Wrapper”).
  2. Set its position to sticky in Motion Effects settings.
  3. Adjust the minimum height to ensure smooth scrolling.

Step 3: Add an Image & Background

  1. Inside the Sticky Wrapper, create another container (name it “Image Wrapper”).
  2. Set its width & height to 600px.
  3. Go to Style → Background and add an image.
  4. Set:
    • Position: Center-Center
    • Repeat: No-repeat
    • Size: Cover

Step 4: Add Custom Classes

To make animations work, add these CSS classes:

  • Main Wrapper: .sticky-circle-wrap
  • Image Wrapper: .image-box

Step 5: Add GSAP ScrollTrigger Code

  1. Drag an HTML Widget into the Main Wrapper.
  2. Paste your GSAP ScrollTrigger code inside.
  3. Publish the page and preview the effect!

Fixing Overlapping Issues

If your animation overlaps with the footer, do this:

  • Go to Sticky Wrapper settings
  • Enable “Stay in Column” under Motion Effects

Final Result

Now your website has a smooth scroll-triggered animation using GSAP ScrollTrigger in Elementor—without needing Elementor Pro!

Conclusion

Adding GSAP ScrollTrigger animations in Elementor makes your website look modern and engaging. It’s easy to set up, lightweight, and works with the free Elementor version!

💬 Have questions? Let me know in the comments!
📢 Want more Elementor tips? Subscribe to my YouTube channel, Alentora!

🚀 Need help with your website? Contact me here!

Custom CSS Class

Copy Code 


 stickey_circle_wrap
circle

JavaScript Code

Copy Code 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  markers: false
});

// Animate From To
$(".stickey_circle_wrap").each(function (index) {
  let triggerElement = $(this);
  let targetElement = $(".circle");

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "top top",
      end: "bottom bottom",
      scrub: 1
    }
  });

  // Check screen width for breakpoint
  if (window.matchMedia("(max-width: 768px)").matches) {
    // Mobile/Tablet
    tl.fromTo(targetElement, {
        width: "10em", // Breakpoint width
        height: "30em",
        borderRadius: "20em"
      },
      {
        width: "100%",
        height: "90vh",
        borderRadius: "0px",
        duration: 1
      }
    );
  } else {
    // Desktop
    tl.fromTo(targetElement, {
        width: "40em", // Original width
        height: "30em",
        borderRadius: "20em"
      },
      {
        width: "100%",
        height: "90vh",
        borderRadius: "0px",
        duration: 1
      }
    );
  }
});
</script>
GSAP ScrollTrigger animation effect in Elementor for smooth scrolling
Copy the code

Related Tutorials

How to Create an Animated Menu in Elementor Without Extra Plugins

How to Highlight Text on Scroll Twice with Elementor & GSAP – Smooth Scroll Animation Tutorial

How to Highlight Text on Scroll Twice in One Page with Elementor and GSAP

Create a stunning 3D image slider in Elementor without Elementor Pro – Step-by-step tutorial.

How to Create a 3D Image Slider in Elementor (No Pro Needed!)

Blurry text animation effect tutorial for Elementor – Smooth scrolling reveal effect.

How to Create a Blurry Text Animation Effect in Elementor (No Pro Required!)

Animated hero section tutorial using Elementor in WordPress.

How to Make an Animated Hero Section With Elementor

GSAP Text Highlight Animation Effect in Elementor - WordPress Tutorial

How to Highlight Text on Scroll with Elementor and GSAP