IMAGE EXPAND ON SCROLL - GSAP Elementor Scrolltrigger

✅ Do you want to make this yourself? Then use this code:

Learn how to create an image reveal on scroll effect using GSAP and Elementor Scrolltrigger. This scrolltrigger GSAP animation is so quiet and smooth that it sets the tone for the entire website. And when you scroll back up, it turns back into a circle. Amazing.

So in this video you’ll learn how to recreate this image effect on your own website, so you can impress your visitors. It’s free and we only need to insert a few lines of code. And it’s of course also responsive.

So let’s dive in and get started. In the video I'll start inside inside the Elementor editor. I'll recreate the entire GSAP animation effect, so you can follow along and do the same.

But just a quick side note before we start - if you want to skip the web design headache, and save time, you can also import this project as a Elementor template, just click the link in top of this description and then click “I want this” after that you can just import it into Elemeneotr. And as a bonus you’ll also get the entire Forrest Tower landing page that I made myself.

For those interested in creating this ScrollTrigger animation yourself, I'll also demonstrate how to do that step by step in this video.

[videowebsite]

I love that you offer both a free option and the option to buy the template.

I just bought this template and just wanted to say thanks, it worked perfectly 👏👏

[rodlivz]

Wow! You've done it again! Well done! This channel is one of my best Elementor resource.

[שיקידר]

Excellent explanation, there are no words, well done and thank you very much, you are a champion

[eekeek]

Keep on innovating web design :), thank you for sharing

[thewebstylist]

So awesome! Great style and that it’s also responsive 🎉📱👏🏻💯

[guiawebservice]

Good Job so inspiring and great work... I will create some content on this in my next video😉... Greetings from Germany.

[prokassim]

Great tutorial, thank you very much, we hope that you make on heading/or body text reveal on scroll, i definitly will buy some from your template library.

[christianroutley]

Love this effect and works perfectly, exactly what I was looking for. I was just wondering, I have made the circle into a square, but how do you change the starting width of the element so it is slightly wider rectangle on the starting point than the size you set? I have tried changing the container width to bigger than 600px but nothing has changed?

[sofianora]

hey! first of all great design, I was wondering why in the very first clip the circle starts to expand once it reaches the center of the page whilst at the end in the tutorial it stops at the bottom. How can you make the starting point for the effect in the center of the screen and not at the bottom?
thank you 🙏

[franktielemans]

I noticed in the devtools that the circle is not 600px by 600px (before it starts to expand), but 640 x 600px.
I had to change original width in the GSAP script to 37, 5em instead of 40em to make it a perfect circle.

[freshlysqueezedify]

This is awesome, I subscribed last week and bought the template but it acts weird when I use a video background instead of an image. Any ideas please?

[CordlessVII]

Is there anyway to reverse the animation where it starts full and scrolls into a circle?

[DiscoverSoller]

Hi Nicolai! Incredible video, you are a maestro. Do you know how to make the scroll animation faster or decrease the scrolling time?

[TamilCinemaNews-pc]

continue your work even if world stops 😀 and try for three.js canvas implementation

[andreabonventre]

Hi, thanks for the video, is this suppose to work for video too? maybe it's me i can't manage but worked just for picture, tks!

[MarkoKozlica]

Great tutorial, thanks! I have created my own page similar to your design and structure, but I have the problem that the circle expand fires one time, and then it fires again. Can you suggest what would be the problem?

[qureshixd]

Great! Do you plan to make large toturial on GSAP A to Z with Elementor?

[jeffrey]

Very cool effect! If you want a rectangle or square instead of a circle, can you simply adjust this in the code? If so, could you tell us what needs to be adjusted? Thanks!

[Phuketembracetourandtravel]

Do you have to have the pro version of elementor?

[WiduStudio]

Hi Nicolai! I absolutely love your videos! Quick question: how can I place the text container inside the image without the paragraph stretching or shrinking as the image resizes? Greetings from Argentina!