Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vamal

Scroll Trgger

Recommended Posts

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

Link to comment
Share on other sites

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 :) 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×