michelleenos

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: It seems to make some difference whether the SVG element has a viewbox attribute, and whether the SVG element itself has sizes set on it via CSS. In the CodePen example above, it works in Safari if I remove the viewBox and set width & height of the SVG both to 100% in CSS. In my own project, this sometimes made a difference and sometimes not, depending on what else I adjusted. Not quite sure of the particulars but worth it to play around with if you are dealing with this issue! The trick described here of adding a 1px <rect> into the <clipPath> element almost worked. It did work in the CodePen example I set up. In my own project, this made the issues better but still didn't really solve it. I'm clipping both images and text etc in that project, and sometimes the images have to be transformed/scaled as well, so maybe there was just too much going on for this trick to be effective. Adding an onUpdate function to force re-rendering on update, as described here, totally works. For performance reasons it's obviously not my favorite solution, but after hours of pulling my hair out over this I'm happy with it!

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)

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?