Vamal Posted November 20, 2021 Share Posted November 20, 2021 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 More sharing options...
akapowl Posted November 20, 2021 Share Posted November 20, 2021 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now