How to Expand Image on Scroll in Elementor | GSAP ScrollTrigger

Want to add a professional scroll-triggered image expand effect to your Elementor website? With just a few lines of GSAP ScrollTrigger code, you can achieve this smooth and responsive animation that leaves a lasting impression on your visitors. Whether you’re building an engaging portfolio, a product showcase, or a creative website, this effect adds the perfect touch of interactivity.

The animation starts with a circular image that expands as the user scrolls down and reverts when they scroll up. The best part? This effect is completely responsive, ensuring it works seamlessly on desktop and mobile devices.

Copy the provided code, paste it into an HTML widget in Elementor, and follow the instructions below for class assignments. No additional plugins are required—just pure creativity and the power of GSAP!

Want to get this as ready made template with just 1 CLICK INSTALL?

Classes Name

Java Script Code (Non Responsive)

				
					<script type="litespeed/javascript" data-src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
				
			

Java Script Code (With Responsive)

				
					<script type="litespeed/javascript" data-src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
				
			

Share :

Facebook
Twitter
LinkedIn
WhatsApp
Picture of Blog Authors

Blog Authors

Category

Recent Post

Share

Suscribe to Our Newsletter

No spam, notifications only about new products, updates.

Subscription Form

Suscribe for our Newsletter

Subscription Form

Related Post