SimonaZ
(Simona)
April 10, 2018, 3:08pm
1
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
jorn
(Jörn)
April 11, 2018, 9:34am
3
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.
jorn
(Jörn)
April 11, 2018, 10:02am
4
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
SimonaZ
(Simona)
April 11, 2018, 11:37am
5
Hello @jorn !
Thank you so much for your help. That’s super clear
What about the clipping of the letters? Do you think I’d need code for that?
Thank you
1 Like
jorn
(Jörn)
April 11, 2018, 11:57am
6
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
SimonaZ
(Simona)
April 11, 2018, 11:59am
7
This is perfect thank you so much @jorn
1 Like