Parallax Effect on an Image

The parallax effect adds depth to a website by making an image move slower than its container when scrolling. Here’s how to easily integrate it into Elementor using GSAP + ScrollTrigger.

Add the GSAP Code in Elementor

👉 In Elementor:

• Go to your WordPress dashboard.
• Navigate to Elementor > Custom Code.
• Click on Add New Code.
• Name it, for example: Effet de parallaxe sur une image.
• Paste the following code, selecting the location </body – End> :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>
gsap.utils.toArray(".section-parallax .parallax-content").forEach((section, i) => {
  const heightDiff = section.offsetHeight - section.parentElement.offsetHeight;
  
  gsap.fromTo(section,{ 
    y: -heightDiff
  }, {
    scrollTrigger: {
      trigger: section,
      scrub: true
    },
    y: 0,
    ease: "none"
  });
});
</script>

Create the Structure in Elementor

Step 1: the Parent Container

• Add an Elementor container.
• Give it the CSS class: section-parallax
• Set the container height to approximately 80vh (smaller than the image to see the effect).

Step 2: the Image

• Add an Image widget to this container.
• Give it the CSS class: parallax-content
• In the image’s advanced settings:
  • Position: Absolute
  • Size: fully cover the container (width 100%, height auto or fixed).
  • Height: in the demo → approximately 200vh (taller than the container to clearly see the offset).

Expected Result

When you scroll, the image moves slower than the rest of the content → creating an elegant and modern depth effect.

Customize the Code

Let’s look at the key part:

gsap.fromTo(section,{ 
    y: -heightDiff
  }, {
    scrollTrigger: {
      trigger: section,
      scrub: true
    },
    y: 0,
    ease: "none"
});

Explanations:

• y: -heightDiff → The image starts offset upwards by the difference between its size and the container’s.
• y: 0 → The image returns to its normal position during scrolling.
• scrub: true → Synchronizes the animation with the scroll progress.
• ease: “none” → No acceleration, the effect remains linear.

Possible Customizations:

1. Change the scroll speed
   • Replace scrub: true with scrub: 1 or scrub: 2 → adds an inertia effect (smoother).
2. Limit the trigger area scrollTrigger: { trigger: section, start: "top 80%", // commence quand le container arrive à 80% du viewport end: "bottom 20%", // termine quand le bas atteint 20% scrub: true }
3. Add an easing for a smoother effect ease: "power2.out"
4. Apply to multiple images
   • The code gsap.utils.toArray(".section-parallax .parallax-content") already handles multiple sections automatically.

✅ You can now create a modern and professional parallax effect on your images with Elementor + GSAP.