Scroll Trgger

[Vamal]

Hello to everyone, i'm new to the forum, so i would like to ask for some advice-hint in achieving something like this hero section. As i can see in source is made with gsap. I would like that letterbox animation - preferred in the opposite way(closing on scroll). My first guess is to do it off-canvas div.

Thanks in advance.

 

https://www.mixlegno.com/en/reflect

[akapowl]

Welcome to the forums @Vamal

 

Generally, as the forum guidelines state, we don't provide "How-To-Do-This-Effect" solutions on here.

 

The first thing you want to be looking for is ScrollTrigger

 

I have shown one possibility for how to achieve something similar in this thread here

 

 

 

If you want the image in the back scaling at the same time as the wrapper, I would suggest converting the tween in the example of the linked post to a timeline (which has the scrollTrigger attached) and add a second tween to it for that (with both having a position parameter of 0).

 

To get it work the other way around, you could just change the values set in the CSS to be 100vh/100vw and tween to 75vh/75vw instead.

 

Usually for performance reasons it is best to avoid tweening on height and width but use representative transforms instead, so if you run into any performance issues, that is one thing you could consider changing, too. And please note, this is just one possible way for how to do things. YMMV

 

Give it a shot, and if you run into problems, we'll be glad to help with any GSAP specific questions. Happy tweening