Framer rotate image array module (Part 1)

A framer module that automatically rotates an image array for you.

VendHQ has recently gone through a fantastic rebranding and the outcome includes a bunch of beautiful icons that represents our users: A wide variety of retail store owners. I have taken some of these illustrations and turned them into a loading animation, hoping we will implement it in the near future to delight our end users!

Read along to see how this Framer prototype was made:

For the experienced Framers:
Module + Framer + Sketch Example Link

For the beginners:
Read along and I’ll be taking you through the steps from Sketch to Framer.

1. Setting up from Sketch

Simply create the number of artboards with the same dimension and name them nicely. Note that you should also have an underlying shape layer with the same dimension as the artboard. If you are unsure, download this file to see the example Sketch file.

Sketch file setup

2. Import into Framer Studio

Framer has made it all too easy to import an existing Sketch file straight into Framer. However there are a few catches so I strongly recommend you reading this before you import. http://framerjs.com/learn/import/sketch-tips/

I personally like to name all my sketch imported layer variable selector as “il”.

3. Include the custom module

Copy and paste the split-image-array.coffee file into your framer project > modules folder. Now your modules folder should look like this.

4. Write some coffeescript

To properly include the custom module into Framer, we need to add this to the editor:

splitImageArrayModule = require “split-image-array”

Next thing did was make variables for each artboards imported, and create an array with all the artboards.

artboard1 = il.artboard1
artboard2 = il.artboard2
artboard3 = il.artboard3
artboard4 = il.artboard4
artboard5 = il.artboard5
allArtboards = [artboard1, artboard2, artboard3, artboard4, artboard5]

By default, only the first artboard will be visible, therefore to make artboard 2, 3, 4, 5 visible too, we can declare something like:

artboard2.visible = true
artboard3.visible = true
artboard4.visible = true
artboard5.visible = true

But nobody likes to write the same thing more than twice, so here’s a better way to do the same thing but using for loops (see notes for more info):

for artboard in allArtboards
    artboard.visible = true

    artboard.centerX()

5. Call the function from the custom module

Now simply call the function from the module:

splitImageArrayModule.splitImageArray(allArtboards)

Now you should have the image nicely laid out for you.

Now you can try and take away artboard 5 from the allArtboards array, and you should notice the carousel will update itself nicely too.

Huzzah! You’ve just successfully called a function from the module. Let’s start building a looping animation for this carousel in part 2.

Stay tuned!