Jump to content


p5js causes "point.matrixTransformation is not a function" (SVG Pan/Zoom Interaction)

Go to solution Solved by LaterBloxxer,

Recommended Posts

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.

See the Pen oGoyYb by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Hi @LaterBloxxer. I don't see that error in the CodePen you provided, but this definitely doesn't sound like a GSAP-related question. My best guess (and I can't tell for sure because I don't see a minimal demo that reproduces the issue) is that your "point" object isn't an SVG Point. Perhaps you're using something from P5 (I'm not familiar with that) and it doesn't have such a method. 


If you have any GSAP-related questions, we'd be happy to help with those. Just please make sure you provide a minimal demo that clearly illustrates the issue. 


Enjoy the tools. 

  • Like 1
Link to comment
Share on other sites

  • Solution

I apologise for the CodePen, I wanted to give an example of what I looked at for one of the SVG/Pan examples I have taken as a link but it seemed to show the actual sketch of it.


I found the issue - p5 has a function that draws a "point", and I named the variable of the created SVG point as "point" which interfers with the P5 function. Simply naming it to something else like "pt" made it work. I appreciate for the quick reply!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.