Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jphilung

Using GSAP and clip-path (CSS or SVG) for a reveal effect

Recommended Posts

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 shape. Safari can't seem to be able to animate the attributes of the SVG shape inside the <clipPath> component. If I resize the window, the final SVG clipPath is rendered, so it seems that Safari cannot render the graphics without being resized.

 

For IE / Edge, I haven't tested, but I likely won't be able to support those browsers.

 

Trying to see if others had suggestions on how to improve the performance of this reveal effect on Firefox and/or Safari.

See the Pen NpRJmw by jphilung (@jphilung) on CodePen

Link to post
Share on other sites

Hi jphilung  :)

 

Welcome to the GreenSock forum.

 

My recommendation would be to use a mask instead of a clip-path. I've run into the inconsistencies you're seeing plenty of times. I made this demo to show the differences in the various browsers.

 

See the Pen MewvjM by PointC (@PointC) on CodePen

 

I think you'll find that a mask will cause you less headaches in the long run. Here's my pen of the world's simplest SVG mask.

 

See the Pen KzmXYK by PointC (@PointC) on CodePen

 

And here's a reveal much like what you're trying to accomplish.

 

See the Pen ENRprd by PointC (@PointC) on CodePen

 

Bottom line - my vote is for a mask. Others may offer differing thoughts or suggestions. Hopefully that helps.

 

Happy tweening.

:)

  • Like 6
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×