Search the Community
Showing results for tags 'matrix transformation'.
Found 2 results
-
Hello! I am new to using GSAP so I apologise if I follow an incorrect format. I'm currently creating an interaction map that is made out of SVG that uses zoom and pan. I have used multiple solutions (specifically this one) from other topics related to my idea and tried code from CodePen created by other users. At the same time, I am using p5.js which I noticed that this library can be used with. The issue I'm facing is when I try to implement the zoom/pan interaction from one of the examples, it causes an error when I try to interact with the SVG: "Uncaught TypeError: point.matrixTransform is not a function". I was constantly searching for the exact cause until I have removed the "setup()" and "draw()" functions which causes the interaction to work. Nothing else could have interefered as I have created a completely new project that only contained the SVG and the code of the interaction without any of the p5 functions which also worked. I tried to search if other people had a similar issue to mine, but it seems like I'm the first. I am very confused why this happens, does anybody know why? I need both of those functions to do the fundamental things with p5. -
Hello, I am trying to apply a matrix transformation to an SVG group element which already has a matrix transformation applied to it. So, the current transformation is: matrix(1.0349256,-0.46932166,0.45501964,1.1067711,-3.9816644,131.00524) the TweenMax.to transform being applied is: matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861) the result I am expecting is: matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861) but the result is that the transform attribute is gone and a new style attribute exists as follows: style="transform: matrix(2.03492, -0.46932, 0.455, 0.51068, 19.2763, 121.028);" The result is very close. The first 4 numbers in the matrix are great. The last two, I am confused about. I don't mind doing some preprocessing to get the matrix into the right form, but I am unsure what adjustments need to be made in order to get the last two values to line up correct, while preserving the first 4 values in the matrix. Any advice for solving this problem to shed some light on what is happening and what I need to do to adjust my tween would be greatly appreciated.
