celli Posted November 8, 2022 Share Posted November 8, 2022 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 More sharing options...
Carl Posted November 8, 2022 Share Posted November 8, 2022 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. 1 Link to comment Share on other sites More sharing options...
celli Posted November 8, 2022 Author Share Posted November 8, 2022 @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 More sharing options...
Carl Posted November 9, 2022 Share Posted November 9, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now