fullscreen image scrolling to reveal text / page immediately below

[modernanim]

I came across this website that has a lovely homepage text 'reveal': https://vervaunt.com

Essentially I'd like to try and recreate a similar thing, where a homepage fullscreen 'hero' reveals a 'content' area below that appears to be fixed under the 'hero' until the 'hero' has scrolled out of the way...

Is tis even possible with GSAP? The code pen above is as far as I got!

Any help much appreciated!

All the best

Matt

See the Pen emYWzpo by dezbat (@dezbat) on CodePen.

Edited March 7, 2025 by modernanim
typo!

[mvaneijgen]

Hi @modernanim welcome to the forum!

 

Yep this is certainly possible with GSAP, but the trick is create the animation you want and then hook that animation to ScrollTrigger. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

[modernanim]

Ummm... I think I get it... 

So in this instance, get the animation working correctly with NO scroll interactions first?

Ie

1. slide the 'hero' image off the underlying content in a way I like.. then

2. Hook that to scroll trigger?

the only thing is the whole feel of it is to do with the standard scroll behaviour 'revealing' a surprise layer underneath...

 

[mvaneijgen]

I would create an element, something like .myTrigger and put both of your (lets call them) cards in it. Use some CSS to stack both cards, see my post for a simple CSS grid trick. 

 

Then move card one 100% of its height eg yPercent: -100 up and have a ScrollTrigger that pins .myTrigger. 

 

47 minutes ago, modernanim said:

the only thing is the whole feel of it is to do with the standard scroll behaviour 'revealing' a surprise layer underneath...

If the element moves 100% of its own height (with a linear ease) and your ScrollTrigger lasts for that amount of distance, it will feel like if it was just scrolling normally. If you don't tell anyone I won't either 😉 🎩 🪄 ✨

 

Hope it helps and happy tweening! 

 

See the Pen ogNWwWz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen wBvdpqL by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[modernanim]

Just got a moment for this — and big thanks to both @Rodrigo and @mvaneijgen — straight off the bat in Codepen it looks like Rodrigo might have nailed it, just lookign throihg the related info.

[modernanim]

Actually @mvaneijgen has got this right too, just been toying with your helper commented .js — realyl helpful, thanks so much, a solution + learning experience!