aashby13

Transitioning to version 3 was pretty easy. You guys have the best documentation of any library I've ever worked with. I may be new to the forums, but I've been using GSAP since the good ol' Flash days. Love it! I was super excited to dive into GSAP3. I code in Typescript a lot and really appreciate having proper typings. I also use NPM, so the improved NPM support is great. Better intellisense, yadda, yadda, yadda... I could go on and on.

FYI, here are some issues/solutions I've documented when working with SVGs: SAFARI requires SVGImageElement width & height to be inlined or image will not show. Mobile Safari looks for clip-path url based on base href in head tag, so url(#clip-path) will not work. Fix is to dynamically add widow.location.href to url: 'url(' + window.location.href + '#clip-path)' Some versions of EDGE (16 for sure) don't allow CSS transform to be used on some svg elements (SVGImageElement for sure). Inlined x & y should be used instead & dynamically updated if needed. This also helps w EDGE versions that do allow CSS transform on svg elements but don't seem to update visually even though the css selector has changed.

Great! Thanks for being so on top of this.

FYI, I'm working on a single page application that uses gsap pretty heavily. There's lots of games and animations in it. While converting it from gsap 2 to 3, I got a lot of those Invalid property warnings until it was completely converted. I banged my head against the wall a few times trying to figure out if there was something wrong with my code. I ended up just moving on to the next feature that uses gsap, and when I was done no warnings at all.

gsap.to(target, {duration: 0.3, autoAlpha: 0}); The expected behavior is that visibility will be set to hidden, but as you can see in this pen (see console) when you click the target (red div) the visibility is set to inherit. And because the target is still visible it's still clickable, so when it's clicked again, then the visibility is set to hidden. I suspect this is a bug. With GSAP 2 the visibility is correctly set to hidden.

Hi Zach, thanks for the reply and link. MotionPathPlugin.rawPathToString(MotionPathPlugin.arrayToRawPath(xyObjArray, {curviness: 1.2})) was just what I was looking for. I had to dive into the source code to see what argument options I had.

I'm converting a project using gsap 2 to gsap 3. BezierPlugin.bezierThrough() is used, but I don't see a compatible method in the MotionPathPlugin. What would I use to replace that function?