This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Chris Ralston
Posted Jul 09 - Read on Facebook

Hi everyone,
I'm pretty new to Framer and I'm trying to get a grasp on "Utils.modulate". Are there any good tutorials, example projects, articles that I should look at besides the documentation on the framer site? Thanks in advance

9 Comments

Pete Schaffner

Hey Chris, welcome to the community :) I don't think I can give a better explanation than that given in the docs, but as for the parameters, I like to think of them in this way:

Utils.modulate(<seed number>, <translate-from range>, <translate-to range>, <return number outside translate-to range?>)

Or in other words, if I want to get a number between 0 and 0.24, but the seed numbers I'm dealing with are integers (for example, the index while looping through an array), I can get the number I'm after by doing something like:

for index in [0..10] then print Utils.modulate index, [0,10], [0,0.24]

Hope that helps!

Koen Bok

cc Jonas make issue/page?

Arvi Raquel-Santos

Also do a search for Brandon Souba inn this group, he helped someone awhile ago and has a few examples.

Chris Ralston

Thanks for the help Pete Schaffner. What you shared makes sense. I guess I'm having a bigger issue with understanding when to use it in my prototypes. Are there specific things you've found it useful for?

Chris Ralston

Thanks Arvi Raquel-Santos! Will do.

Pete Schaffner

Just used it in a module I'm working on actually: https://github.com/peteschaffner/framer-material/blob/master/app.coffee#L46 You can clone or download the project and open in Framer Studio to check it out.

Basically it is for getting a good alpha value for a shadow color based on the layer's 'elevation' property (which is an integer).

Adria Jimenez

Some examples:
print Utils.modulate 5, [0, 10], [0, 100] # 50
print Utils.modulate 2, [0, 10], [0, 1000] # 200
print Utils.modulate 9, [0, 10], [0, 500] # 450

I hope it helps :)

Balraj Chana

It's really useful for calculating percentages. Here's an easy explanation with an example:

A user scores 5/10 in a game and you want to represent the fraction using a horizontal bar chart. The maximum width of the chart is the maximum width of the screen, so 5/10 is 50% width of the screen and 10/10 is full width. Here's an example with comments, have a play around with the percentage variable: http://share.framerjs.com/oy21td7dg2er/

Chris Ralston

Thank you Adria Jimenez and Balraj Chana for chiming in. I'm starting to get the hang of it :) . Greatly appreciated!

Read the entire post on Facebook