Submit your widget

CSS and jQuery Ink Transition Effect

Created 4 years ago   Views 27391   downloads 4446    Author codyhouse
 CSS and jQuery Ink Transition Effect
View DemoDownload 568.8 KB
Share |

This is an ink bleed transition effect, powered by CSS animations.

I recently came across a couple of websites using ink bleeds as transition effects. A great example is the Sevenhills website. At first I thought they were using a HTML canvas powered technique (for allowing transparency), then I checked the source code and found out they weren’t using a video, but a PNG image sprite.

By using a PNG sprite and the steps() timing function in CSS, we can create video effects and use them as transitions! In our resource, we used this technique to fire a modal window, but you can use it to transition between two different pages as well.

The process to create these effects is simple, let me break it down for you:

First, you need a video with a filling effect and a transparent area. Then you need to export this video as a PNG sequence. We used After Effects to export the sequence (make sure to export the alpha channel as well).

Read more: