Play Button to Video Transition using clip-path

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.