Reveal on Scroll

Design help Animations & Interactions
1

Hi there,

I’m trying to figure out what the best way of achieving a “reveal on scroll” interaction like the hero section here: https://www.hugeinc.com

I’ve tried with fixed positioning as well as even trying with an animation on page load as it would only be for my hero section where there shouldn’t be any user input to trigger it.

Still no luck

Thanks
Diego

2

The first frame is regular gif:
https://www.hugeinc.com/~/media/images/modules/large/magenta%20h%20new.gif?as=1&t=636119863351267330

second and third - are with same position of the “H” so you get cool effect (1-3 are background-images)
https://www.hugeinc.com/~/media/images/modules/large/everytown%20h.jpg?as=1&t=636320153012618714
https://www.hugeinc.com/~/media/images/modules/large/today%20show%20h.jpg?as=1&t=636193222783342272

The style - 3 cols with 100vh height.
The transition - this is not by CSS but by JS.

I never try to get this trick by webflow interacion2 (Anyway - this is for tuturial “how-to”). This is new feature.

JS

The scroll effect by Custom JS - this two famous libaries (In your example i think this is custom code)

Fullpage.js

Related Q: