Owen Holt

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

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