Can I create this effect on Webflow? (clip and mask video)

Hi everyone!

I want to create an animation where a different video plays when I hover over a different letter (see mock-up below).

I’ve done a bit of research and this post touches on the topic: https://discourse.webflow.com/t/how-to-clip-and-mask-a-text-title/39284

But is there a straightforward way to embed a video into each letter?

Thank you for the help in advance :slight_smile:

Anyone? Please help :sweat_smile:

Hi

It should be doable. I haven’t tried the text effect before. I’ll give it a go and see what I come up with.

One thing though, the site probably be slow with so many videos going on at the same time.

So I did this real quick for you just to prove the concept.
http://forum-57192.webflow.io

It’s not text objects but the principle is the same. I just added a div and inserted a background video. Added a background color that fades away on hover.

Here’s the preview:
https://preview.webflow.com/preview/forum-57192?preview=55a125c53fe6493e28ae858234dd944e

2 Likes

Hello @jorn!

Thank you so much for your help. That’s super clear :smiley:

What about the clipping of the letters? Do you think I’d need code for that?

Thank you :relaxed:

1 Like

In my “new” example I’ve just used a PNG to fill the space. There are of course many ways to accomplish this but this is quite simple and doesn’t involve any extra code. If you want real letters you need extra code.

Good Luck and hope it helps :grinning:

This is perfect thank you so much @jorn :clap: :raised_hands:

1 Like