Mamboleoo Posted September 1, 2022 Share Posted September 1, 2022 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 2 Link to comment Share on other sites More sharing options...
daniel.mt Posted September 1, 2022 Share Posted September 1, 2022 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 3 Link to comment Share on other sites More sharing options...
Carl Posted September 1, 2022 Share Posted September 1, 2022 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. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted September 1, 2022 Share Posted September 1, 2022 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 2 Link to comment Share on other sites More sharing options...
Mamboleoo Posted September 1, 2022 Author Share Posted September 1, 2022 Yes amazing to see that it was already fixed 🙌 1 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