Framer Classic » 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 = ["🌚", "🌑", "🌒", "🌓", "🌔", "🌕", "🌝", "🌕", "🌖", "🌗", "🌘", "🌑"]

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