Play Button to Video Transition using clip-path

Play Button to Video Transition using clip-path

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
animation click animation video zoom
Image: Play Button to Video Transition using clip-path GIF

This is a really cool transition designed by Eric Johnson where you see the transition from a simple play icon to the background video. The play button has the video in the background and when you click on it, the video from the background zooms in and starts playing.

If you are having trouble with the pen, try the archived copy on GitHub

Play Icon to Video Transition Snippet

See the Pen Aperture video play button/reveal — clip-path approach by Eric Johnson (@ericdjohnson) on CodePen.0

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.