Jump to content

Search the Community

Showing results for tags 'matrix transformation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. 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.
  2. 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.