Framer rotate image array module (Part 2)

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

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:

splitImageArrayModule.splitImageArray(allArtboards)

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 = 0
Utils.interval 1, ->
    container.animate
        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:

mask.center()

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