Zoom into masked text while scrolling in view

Hola guys and gals! I am trying to recreate this zoom effect before the team section from this site . Although, I am not sure if this is possible through webflow. I tried a few different things from position sticky, fixed and even adding a json which scrolls into the text but it didn’t exactly worked out cause the section which was supposed to show after also scrolls parallaly. Maybe some of you who know how to code might be able to work this out.

@Cjh @joshljacobs1 I dunno but I saw some of your projects and thought that you guys might able to work this out :man_shrugging: . I dunno, lol. Sorry if this is annoying

I think I found a video that could help. Not 100% what you are looking for but for sure helps get you close.

1 Like

Hey Rob, thanks for the reference, but I had already tried this method and it didn’t worked out with the text masking thing. After searching for this for quite long, I am sure that this is not entirely possible through webflow. Will probably have to search for custom code or something…

I still feel like it must be possible using a div on top of another div that scales up. The div would be need to be an image that has the text cut out. Then as it fades it reveals the div underneath and continues to scroll.

Maybe I’ll give it a stab! Great idea either way! Really cool site

1 Like

Thanks for the @. Definitely doable, albeit probably in a different manner than how it’s done at the reference.

Option 1: It might honestly be easiest to create a PNG of the text where the text is transparent and the background is a solid color. Place this in a div above the background image, and scale it up on scroll. Simple, elegant.

This might seem like a dumb as rocks solution, but honestly it might be better than Option 2…

Option 2: Create a more complex scroll interaction in Webflow where you’ve got text masking an image, and you scale the text up and the image down at the same time. This is a less ideal solution, because it’s going to be a bear to get 100% right, and you’ll likely get some unintended artifacts this way. Not to mention that it will be challenging to then transition to a section with content on it.

Best of luck!

1 Like

Hey Josh, thanks for the reply. I will definitely try these options out in a while. Hoping that you’re right :crossed_fingers:

Hey, tried this out. Not exactly as I wanted it to be, but yeah, works :slight_smile: Feel free to check it out. Thanks for the help guys @joshljacobs1 @rob_at_alpine

would it be possible to do option 1 with an svg instead of a png?