Utilities » Utilities for arrays

Utilities for arrays

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

Cycle

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