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
-
pagePiling (Very similar to your example transition by deafult
)
pagePiling.js plugin | Create a stack of scrolling pages
Related Q: