[transformOrigin "up" relative to it's current position]

Maybe this helps?
Example:
When you click the rotate button, the image rotates as expected.
     var myElement = document.querySelectorAll("[data-acc-text='myBoard']");
     gsap.to(myElement, {duration: 1,rotation:"-=60"});

 

When you click the Advance button, the image slides as expected but I now want the rotation point to remain fixed in the window at a specified location.

The code I am using to move the image is:

     var myElement = document.querySelectorAll("[data-acc-text='myBoard']");
     gsap.to(myElement, {duration: 1,y:"+=33.333333333%"});

 

What I am missing is how to keep the rotation point fixed on the canvas, regardless of where the image has moved.

https://360.articulate.com/review/content/28ced567-6c45-48a2-a57d-96e9aea29fed/review

[transformOrigin "up" relative to it's current position]

I develop training content using the Articulate suite of products and am just learning about GSAP. I think it has great potential to simplify some of the things I have been trying to achieve. One thing I am struggling with is using transformOrigin to move the rotation point of an object. Picture a giant wheel made of hexagons. I am using GSAP to rotate the wheel just fine and I can get the wheel to "slide down" a distance equal to one hexagon. However, after that, I am struggling to move the rotation point up relative to its location and an equal distance or length to the amount that the image just moved. Suggestions?  

Basically, I am trying to rebuild something like this but using GSAP instead of the limited functionality of the Articulate software:
https://360.articulate.com/review/content/f334153e-4d79-41c6-a666-c14672a6dd38/review