Framer rotate image array module (Part 2)

Following previous post, let’s animate the infinite loop!

Che Wei (Jacky) Lee
Published in
3 min readJun 20, 2015


First thing’s first: Let’s remove the artboard.centerX() in the for loop. Your file should look like this now:

Setup rotating container

Before we dive into the animation, there’s a few things we need to set up:

1. Create a container that holds all of the rotated image array.

container = new Layer
width: artboard1.width
height: artboard1.height
clip: false

2. Make that container a super layer for all the images in the for loop.

for artboard in allArtboards
artboard.visible = true
artboard.superLayer = container

3. Make sure the order of your code is correct:

The order of the code must be in this order

4. Reposition the anchor point of the container

container.originY = 1.5

Setup rotation angle

Now we need to make a slight alteration to this line of code:


And change it to:

rotateAngle = splitImageArrayModule.splitImageArray(allArtboards)

By doing this we have extracted the rotation angle of the image array, in this case the angle will be 72 degrees because there are five images.

I’ve kept this flexible so the splitImageArrayModule will do the calculation as long as you give it an image array.

Rotate container

Now let’s add this block of code:

startAngle = 0Utils.interval 1, ->
properties: {rotationZ: startAngle + rotateAngle}
curve: “spring(300,20,0)”
startAngle = startAngle + rotateAngle

By now your code should look like this, with a rotating container.

Add a clipping mask

1. Create a mask layer before the container

mask = new Layer
width: artboard1.width
height: artboard1.height
clip: true
backgroundColor: “clear”

2. Make it the superlayer of the container

container = new Layer
width: artboard1.width
height: artboard1.height
clip: false
superLayer: mask

Boom! There you have it.

You should have a looping carousel.

To center it to the screen, simply add this to the bottom of your code:

If you would like to download this working file, head over to the prototype and click the downarrow button on the top right corner.



Che Wei (Jacky) Lee
WE BUILD VEND – Product Designer and Developer made in Kaohsiung, Taiwan, raised in Auckland, New Zealand, now based in New York, USA.