Resizing Masking path with CSS

[daf2015]

Hi guys,

The problem is that I did place a video content in a division and scaled down the width of the division till zero. The overflow hidden was a big help for me since I wanted a closing window through time for the video.
The trick functioned but the video was a little bit shaking because of adjusting it to be exactly at the center of the division which was resized through time.

To solve the shaking problem the only solution that I see is to resize a Masking path and have the vid element in a fixed position.

I have been searching now during a week for a solution but no luck.

Any clue or help on this matter is very welcome and thanks in advance.

Daf
Sweden

[daf2015]

http://codepen.io/Khan_/pen/qOOgVj

Here is where the example live.

This example is not showing a masking path but a rectangle that has been scaled down till the object behind disappears totally.

A masking path that scales down via CSS animation would solve the problem of shaking objects. CSS is not perfect whatever the easing is.

[Author]

Posts