Typography or Video Scroll Selector

Design help General
1

Hello All,

Happy Spring from the land of New Jersey. I’m looking for some help to achieve the scroll effect via this website: Badass Films

I see the following:

1.) Typography mapped to video background slides/sections- can this be achieved via Webflow? If so, can you provide some input to do so?

I’ve found some references to 'Navbar Links to Sections ID" or “Background Change on Text Hover” forms/resources, which are helpful, but didn’t quite achieve the result.

2.) There’s two layers of text, one outline, one filled, as an overlay or mask- as you scroll the text fills before mapping to the video background- is this CSS or Javascript? The scroll rate appears to be increased.

I believe Interactions 2.0 could achieve at least of part of the effect, but I’m not sure.

I’ll take this in stages- any input to map typography to video backgrounds/sections would be a huge help. I’ve searched Webflow forums, Google, and the only references I found was in Awwwards, defined as “Scroll video gallery selector” and “Typography scroll selector.”

Here’s my read-only link to the site, however, I didn’t get very far:

Read-Only Link

Thanks in advance to the community for all you do.

Talk soon.

Thanks

Brian

2

I have no clue how to achieve that but it crashed chrome and safari. I’d honestly advise against that if you want people to be able to actually use the site. I always design for function over fashion but if you just want to do it as an exercise, go for it. I think scroll interactions would work to do that but you’d likely need to use some complex masks to get the wipe effect. Not sure it’s doable in webflow without custom code.

3

Hey DFink,

This is way late but thank you for the help.