MatchMedia + SVG attributes

[Mamboleoo]

Hey there!

I may have found an issue with the new matchMedia() feature and using SVG.

If you resize the window down (under 800px) after the animation has been triggered, there is an error in the console.

Error: <rect> attribute transform: Expected transform function, "100".

And if you resize it up, the animation will try to execute again but it will trigger infinite errors.

Uncaught TypeError: Cannot read properties of null (reading 'matrix')

 

I have tried with other kind of SVG attributes, and they seem to work ok (fill, stroke-dashoffset,...)

 

This issue is happening on all major browsers (Edge, Firefox, Safari)

See the Pen bGMbjdK by Mamboleoo (@Mamboleoo) on CodePen

[daniel.mt]

I confirm as well that this may be a bug.

If you need a fix asap a workaround would be to apply the tween on group instead of the path. Or you can remove the x/y from your path. 

 

See the Pen dyebqJQ by danielmtd (@danielmtd) on CodePen

[Carl]

Hey @Mamboleoo

 

Thanks for the simplified demo. I'm sure it will help the team. 

This may very well be a bug that needs to be addressed, however if you intend to animate the x attribute and not an x transform like translateX then use the Attr Plugin. the code below seems to remove the errors.

 

mm.add("(min-width: 800px)", () => {
  gsap.to('rect', {
    attr:{x: 100}
  });
});

 

However, the code you wrote should work and should animate a transform value just as x, y, scale, etc would for anything else.

 

Also, if you switch your <rect> to a <circle> the error goes away. I assume this all relates to the fact that rect has a proper x attribute and circle, group, and other svg elements do not.

 

I'm sure @GreenSock will give it a look.

 

---

 

Thanks also to @daniel.mt for the help.

 

[GreenSock]

Yeah, sorry about that @Mamboleoo - it was a regression in 3.11.0 that has already been fixed in the next release (due out very soon) which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

See the Pen poVzMWE by GreenSock (@GreenSock) on CodePen

[Mamboleoo]

Yes amazing to see that it was already fixed 🙌