"rolling" square animation

[EJ29]

Hopefully this will be easy.

 

I'm trying to get a 2D square to "roll" into position. Each rotation of 90 degrees will be around its bottom right corner. There will be an image on the face of the square which is not symmetrical, so that has to behave as expected. I've rounded opposite corners in the CodePen example to show this asymmetry.

 

Square1 shows the sort of animation I'm after, but it flicks back to rotation:0 between "rolls", so I can't use this.

Square2 is my feeble attempt at changing the transformOrigin, but it doesn't work this way (obviously).

 

How can I change the transformOrigin after each 90 degree rotation, so the next comes from the new bottom right corner?

 

Thanks

See the Pen QKPvoo by EricJ1 (@EricJ1) on CodePen

[Carl]

With SVG elements, GSAP's smoothOrigin feature makes this very easy:

var tl = new TimelineMax()

tl.to("#box", 1, {rotation:"+=90", smoothOrigin:true, transformOrigin:"right bottom"})
  .to("#box", 1, {rotation:"+=90", transformOrigin:"right top"})
  .to("#box", 1, {rotation:"+=90", transformOrigin:"left top"})
  .to("#box", 1, {rotation:"+=90", transformOrigin:"left bottom"})

http://codepen.io/GreenSock/pen/GjLEQz?editors=1010

 

video: 

https://youtu.be/GsniGDilKtI

 

For a div, it isn't so easy. In fact I struggle for a good solution.

Here is a very unscientific hack with some flaws at slow speeds: 

 

var tl1 = new TimelineMax();
tl1.to("#square1", 2, {rotation: "+=90", x:"+=100"}) 
   .to("#square1", 1, {y:"-=11", repeat:1, yoyo:true}, 0) 
   
   .add("label1")
   .to("#square1", 2, {rotation: "+=90", x:"+=100"}, "label1") 
   .to("#square1", 1, {y:"-=11", repeat:1, yoyo:true}, "label1")


   .add("label2")
   .to("#square1", 2, {rotation: "+=90", x:"+=100"}, "label2") 
   .to("#square1", 1, {y:"-=11", repeat:1, yoyo:true}, "label2")

 

http://codepen.io/GreenSock/pen/mAgrOb?editors=0010

 

The basic idea is that the box always rotates around its center but it also moves right and oscilates up and down to give the appearance that it is rotating around a corner.

 

Perhaps someone else has a good solution. For now SVG is the real winner if you can use it.

[EJ29]

Ah, great, I'm glad it wasn't just me being dim! I'll get the artsy people to give me the assets as SVG!

 

Thanks.