I am working on a reveal effect to show a frame over another one using clip-path either an inline SVG with <clipPath> or with a CSS shape and basically animating the reveal.
On the Codepen:
* Left side uses SVG clipPath
* Right side uses CSS shape
Basically, on Desktop Chrome v56, I have great performance and it works as it should for both strategies.
On Desktop Firefox, I can only get it to work with SVG clipPath. However, on the first rendering, the animation is jerky. On subsequent renderings, it is smooth.
On Desktop Safari, I can only get it to work with a CSS shap