How to make a thumbnail hover video animation like this site (https://www.admilk.co/)

Hey everyone. There’s a website for a very successful media production company that has super clean animations and was built in webflow (site, AdMilk https://www.admilk.co/)

The website is beautiful. One feature of the website that I can’t stop drooling over however is the project thumbnail hover animations. When you cover over a thumbnail, it gets replaced by a video similar to what you see on YouTube. When your mouse leaves the frame, it returns to the image thumbnail.

Now, I’ve mimicked this effect on countless previous projects using simple interactions to switch between an image and an animated gif. The key difference here - when you return to the same frame, it resumes the video where it left off. It’s somehow pausing the background video when the mouse leaves the frame.

I wouldn’t call myself a developer, but rather someone who is trying to get more comfortable with code and specific solutions. After inspecting the site I’ve noticed that they’re using Barba.js, which I assume is for their page transitions (which are super clean, BTW) but they’re also using GSAP, which I suspect is the animation library handling this effect.

Any help would be much appreciated!

Look like it’s background video and as bg video has now play pause button the trick here is tha when you hover you tggrrer play and when you hover out you trigger pause.

you just need a little bit of javascript to trigger a click on the button on hover in + set image hover the video to display none and the reverse on hover out.

Thanks for investigating! Yes it does look like they’re using a background video element. You think it’s as simple as that? In the network tab of the page it looks like the videos are only being loaded when the element is selected. Is that a native feature of the background video element or would it require a custom solution? I intend on having multiple videos on a page so don’t want to slow down my site speed too much. Thanks!

Also wondering how I would be able to use a background video element for a CMS collection.

You have to try it.
In webflow we don’t have the hand background video. And its plausible that video are loaded when they became visible. And if you know javascript, you can use it too it’s quite simple to pause play video in javascript… and hover in out too…