Jump to content

Owen Holt

transformOrigin "up" relative to it's current position

Moderator Tag

Recommended Posts

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:

Link to comment
Share on other sites

Hey Owen and welcome to the GreenSock forums.


There are a couple of ways to approach this sort of thing. One way is to animate the content meaning you actually rotate all of the tiles/container of the tiles. The other way is to animate the camera/viewBox of the content. I think the second would be easier to manage but how to set it up and whether or not it's very possible depends on your set up. 


Is there a specific question that we can help with? If so, perhaps a minimal demo would help us understand what you're wanting help with.

Link to comment
Share on other sites

Maybe this helps?
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.


Link to comment
Share on other sites

It's not a simple task. Say for example someone clicks "Advance" then "rotate" then "Advance" again. Following your methodology, you would need to translate the entire SVG, rotate the entire SVG about the new (translated) origin, then translate relative to the translated, rotated position. It gets complex very quickly :) That's why I would think it would be easier to animate something like a viewBox where you can separate the translation and rotation. 


Side note: I've never heard of or used Articulate before. If all you're doing is something along the lines of this I would think it would be easier to set things up from scratch. 

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

@ZachSaucier Articulate exists quite some time. Actually since 2002, and Storyline its main authoring tool since 2004. Its an elearning rapid authoring tool provider. For years there were 3 major players on that market globally. Adobe with Captivate, Articulate with Storyline and Trivantis ( eLearning Brothers now ) with Lectora. All three at some point in time shifted from using Flash to HTML5. And all three code their HTML5 not as clean and readable as most developers would like. Articulate has the most closed setup and its tough to discover where is what happening when publishing to HTML in their authoring tool.

At some point they introduced Storyline360.. and in its core it had Tweenlite built-in. I guess in proper agreement with Jack. In fact all of its very limited animation possibilities were done by Tweenlite back then. But all hidden for the common user. I tend to dive into the backend of these things and discovered at some point they still used Tweenlite. Whereas GSAP 3 at that moment in time already was available. A bit of ranting on the Elearning Heroes forum ( https://community.articulate.com/discussions/articulate-storyline/storyline360-animation-and-gsap-greensock ) apparently draw attention by Articulate because a few months later i discovered that they had updated to GSAP3 in Articulate360.
https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360 )

Most users of Articulate Storyline are no coders or scripters. They tend to use the tool as is. But with the use of Javascript and GSAP you can do so much more with it. I do think Articulate could benefit greatly with better cooperation with GSAP developers and create a more intuitive and direct approach on working with GSAP in the Storyline editor.

  • Thanks 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.