Framer Classic » Utilities » Utilities for arrays

Utilities for arrays

How to cycle through the values of an array or pick a value at random.


Utils.cycle() is unique because it’s a function that creates another function: you give it an array and it will return a function.

This new function will return the next item from the original array every time you call it.

Cycle example

In this example project, we have an array of moon phases.

# Phases of the moon
phases = ["🌚", "🌑", "🌒", "🌓", "🌔", "🌕", "🌝", "🌕", "🌖", "🌗", "🌘", "🌑"]

We create a cycler called nextPhase by passing our phases array as the argument.

# Cycler with the different phases
nextPhase = Utils.cycle phases

Now every time we call nextPhase(), it will return the next moon emoji.

# A new phase every second
Utils.interval 1, ->
    theMoon.text = nextPhase()
Cycle example
Cycling through the moon’s phases
Download Framer project

Random Choice

Utils.randomChoice() will return a random pick from the list of possible items you give it.

Random Choice example

Our project has a possibleBuildings array with a selection of emojis.

possibleBuildings = ["🏠", "🏡", "🏢", "🏬", "🏣", "🏤", "🏥", "🏦", "🏨", "🏩", "💒", "⛪️", "🏪", "🏫"]

Every half a second we grab a random building by calling Utils.randomChoice with the possibleBuildings array as argument…

# Pick a random building
buildings[number].html = Utils.randomChoice possibleBuildings

…and then animate the building from left to right.

Random Choice example
Random buildings scrolling by
Download Framer project

Leave a Reply