michelleenos
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by michelleenos
-
-
I have an animation using CSS/SVG clip paths (the clips are defined in SVG but referenced in CSS). I want to be able to animate the paths to reveal different content. This works great in Chrome & Firefox, but in Safari it either does not work at all or sort of half-works and looks clearly broken.
I've tried and rejected lots of alternatives (using a mask instead, defining everything in SVG instead of using CSS at all, etc etc) and I really wanted this one to work. Is there any fix for this?
(codepen is a super simplified example just to demonstrate what I am trying to do)
See the Pen KKXBbvO?editors=1111 by crankysparrow (@crankysparrow) on CodePen
-
I've been using ScrollTrigger for the first time and loving it! But, I've come across some issues with the plugin in Firefox specifically. I've been working on an animation with a large pinned item. Often, if you scroll too fast there's a brief moment where the pinned item will keep scrolling - before GSAP catches up and pins it in place.
I know this has to do with how browsers handle scroll behavior, but it seems just fine on Chrome, while Firefox is really buggy-looking if you scroll too fast. I've tried adding
anticipatePin
and it might help a little bit, but the problem is still there.I haven't managed to get all of my content into a CodePen demo, but I'm attaching an example from the docs which displays the same problem, and a GIF screen capture. Is there anything I can do to mitigate this?
See the Pen MWyaYaq?editors=1010 by crankysparrow (@crankysparrow) on CodePen
Issues with SVG clip-path animations in Safari
in GSAP
Posted
In case anyone finds this looking for a solution, here's a couple things I ended up figuring out, partly based on the responses linked above: