Jump to content
Search Community

Animating clipPath in Safari

celli test
Moderator Tag

Recommended Posts

Hi GSAP!
 

I am animating a clipPath which works perfectly in Chrome, but in Safari and iOS it doesn't seem to animate. The black rectangles will animate on scroll as they get to the top of the viewport.

I read about clipPath bugs in webKit Safari from back in 2017-2018, but I didn't think they still exist. I can change clipPaths to masks in the SVG, but larger SVG masks always seem to be much more costly on CPU and tend to slow down my pages.

Is there is another way or maybe something I'm missing with GSAP that should animate this in Safari/iOS.

See the Pen oNyzGGE by celli (@celli) on CodePen

Link to comment
Share on other sites

You can animate things inside a <clipPath> fine in Safari as shown in this demo here

See the Pen yLEOdJK?editors=0110 by snorkltv (@snorkltv) on CodePen

 

I noticed you are using <clippath> instead of <clipPath>. Maybe safari is picky?

 

I had trouble following your demo with the loops and mediaqueries. 

If you still have trouble please reduce it down to a single tween on a single element if that works, then slowly build up. 

 

  • Like 1
Link to comment
Share on other sites

@Carl yes, thank you. Animating the actual elements within the clipPath does work in Safari.

The only issue I see is that I would have multiple elements within each clipPath, and it doesn't look like I can use <g></g> tags to wrap all elements within each clipPath, so I wouldn't be able to animate them together as a unit -- do you know if we can group all clipPath elements in each clipPath in another way?

Link to comment
Share on other sites

that is correct, you can't use groups in a clipPath.

you can give multiple elements in your clipPath the same class and move them all at the same time. 

scaling and rotating could get a bit weird though. not really sure what you're trying to do. 

Link to comment
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.
×
×
  • Create New...