Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

"rolling" square animation

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?



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

Link to comment
Share on other sites

  • Solution

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"})
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) 
   .to("#square1", 2, {rotation: "+=90", x:"+=100"}, "label1") 
   .to("#square1", 1, {y:"-=11", repeat:1, yoyo:true}, "label1")

   .to("#square1", 2, {rotation: "+=90", x:"+=100"}, "label2") 
   .to("#square1", 1, {y:"-=11", repeat:1, yoyo:true}, "label2")
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.
  • Like 3
Link to comment
Share on other sites

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!



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.