Introduction to FramerJS Utils.modulate

Hello eveyone, my name is Sergiy, i am ux/ui guy that fell in love with Framer Studio recently.

Today i want to show you some basic stuff that u can do with utility called “modulate”. Which is really simple to use, its powerfull and can be real usefull when doing complex interactions, where one object behaviour depends on the other object.

I hope you are familiar with Framer Studio basics. If not i will highly recommend checking skillshare course. It will take bout an hour.

So Modulate . Basic syntax looks like this

Utils.modulate(value,[a,a],[b,b],limit)

Translates a number between two ranges. When you enable limit, it will never return a value outside of the b range. The default value for limit is false.

Arguments

1. value — A variable, representing the input.
2. [a, a] — The first range of two numbers.
3. [b, b] — The second range of two numbers.
4. limit — A boolean, set to false by default. (Optional)

So basically, modulate is a way to convert numbers between different scales, like going from Celcius to Fahrenheit. So scales can be different in sizes, their start and end points can be different , but there is always a correlation between two numbers.

print Utils.modulate(0.5, [0, 1], [0, 100])
# Output: 50

This doesnt do much. However if we will connect one numberic property of one object with other numberic property of second object — magic things start to happen.

Lets start basic project in Framer studio, create couple of layers, make one layer draggable within constraints

# Set background
bg = new BackgroundLayer
 backgroundColor: “#28affa”
# Constraints layer
constraints = new Layer 
 width: 300
 height: 50
 backgroundColor: “rgba(255,255,255, 0.0)”
 borderRadius: 6
# Create layer
layerA = new Layer
 width: 50
 height: 50
 backgroundColor: “#fff”
 borderRadius: 4
 
# Create layer
layerB = new Layer
 width: 50
 height: 50
 backgroundColor: “#fff”
 borderRadius: 4
# position layers
constraints.centerX()
constraints.y=200
layerA.centerX()
layerA.y=constraints.y
layerB.centerX()
layerB.y=layerA.y+100
# Enable dragging, set constraints
layerA.draggable.enabled = true
layerA.draggable.vertical=false
layerA.draggable.overdrag=false
layerA.draggable.constraints = constraints.frame

it doesnt do much for now, and looks like this

Lets add some more code

layerA.on Events.Move,->
 layerB.x=Utils.modulate(layerA.x,[constraints.minX,constraints.maxX],[constraints.minX-100,constraints.maxX+100],true)

If you try to drag the top layer, the bottom layer will start following the movement of top layer

So what has happened?

We have add event listener Move on layerA, and we started to use our modulate utils, defining X value of LayerA withing the range of our constraints and we are modulating X position of LayerB with the range which is 100 pixels wider from both sides.

So moving top layer to very left position, code will move bottom layer to same position -100 pixels, same time right edge position of top layer, moves bottom layer to the right edge of contraints +100 pixels. So if u will break both ranges of X position of the layers in lets say 100 small parts, each small piece from one range will be linked to small piece of the other range within same proportion from the edge

Let’s try to do something else, and instead of moving second layer we will rotate it

layerB.rotation=Utils.modulate(layerA.x,[constraints.minX,constraints.maxX],[-180,180],true)

Result should look like this

If we will try scale

layerB.scale=Utils.modulate(layerA.x,[constraints.minX,constraints.maxX],[0.25,4],true)

we can try modulating all 3 properties at same time, and we will get something like this

You see example project live here. Download the code if something is not quite well working when u are trying yourself.

Remember the temperature scales?

Here you can find live framer project to play with and check the code

Other sample I did with heavy usage of modulate function and was showcasing it during our framerlondon meetups — android settings screen

If you have any questions on modulate — feel free to ask here, but better place — framer slack group or facebook group

Also showcase your samples of framer projects done with modulate.