Jump to content
Search Community

jama1017

Premium
  • Posts

    5
  • Joined

  • Last visited

Everything posted by jama1017

  1. You might have missed this but I explained what I was trying to achieve here.
  2. Sorry I accidentally submitted my reply before actually finished typing this line. Can you help me with this follow-up question also? Thanks!
  3. Hi Jack, Thanks for sharing the code! Actually I think this is what I was looking for. I now see that GSAP does not explicitly multiply a bunch of transformation matricies together but instead directly build the final aggragated transformation matrix. However, the math works out to be the same based on the code you shared. The (T)(R)(T_{-1}) I was referring to is kind of explained in this link under the section "Rotation around a point": https://www.alanzucconi.com/2016/02/10/tranfsormation-matrix/. Basically, if you work out the matrix math of (T)(R)(T_{-1}) manually, you would see that the final tx and ty value matches the two lines here, with scaleX = scaleY = 1 and skewX = skewY = 0: As for what I am trying to achieve, I was trying to see if I can reverse-engineer the xOrigin and yOrigin values set through the transformOrigin attribute in the GSAP API, assuming that I somehow don't have access to the original GSAP animation code for the animation I showed in the CodePen (i.e. I only have access to the final animation and can call functions on gsap/timeline objects, etc, but not the GSAP code that generates the animation). As a follow-up question, I wonder if there is a straightforward way to get the values of xOrigin, yOrigin, xOffset, and yOffset (and what actually does xOffset and yOffset refer to again)?
  4. Hi! Thanks for your reply. Your first point here touches upon exactly what I was asking for. Because GSAP sets transform-origin to 0 and bakes the real one into the matrix, the "baking the real one" operation here involves what I described in my question: in order to rotate around the point (300, 200), the square element needs to be first translated by -300, -200, then rotated by 90, then translated back by 300, 200. These transforamtions are done via matricies, i.e. (T)(R)(T_{-1}). Right now, if I inspect the SVG code, I can see that GSAP updates the transform attribute of the square element with a matrix every frame, and that matrix is the end product of (T)(R)(T_{-1}). I wonder how I can access T, R, T_{-1} individually, as these matricies have to exist at some point in the GSAP code for it to produce the resulting matrix that is being set as the value for the transform attribute.
  5. Hi! I want to begin by thanking the developers of GSAP for creating this wonderful tool. I have been using it since 2018. My question is pretty straightforward from the title. An example scenario can be found in the CodePen demo. Basically, when I want to rotate a square by 90 degrees around a point (in the demo, it is (300, 200) in SVG coordinate, as indicated by the blue dot), the transformation matrices needed are first a Translation matrix T_{-1} that offsets the object by -300, -200, then a Rotation matrix R that rotates the object by 90, then the inverse of that first Translation matrix T that brings the object back by offseting it with 300, 200. The final aggragated transformation matrix is then the product of (T)(R)(T_{-1}) By inspecting the final transformation matrix that GSAP sets for the square element via the transform attribute, I am pretty sure this is how GSAP handles rotation around an arbirtrary point, instead of setting the transform-origin attribute. I wonder then how I can access each of the individual T, R, and T_{-1} matricies? If there is not a direct function call to get these, can you point to me where in the source were these matricies computed? Thanks!
×
×
  • Create New...