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
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!
cc Jonas make issue/page?
Also do a search for Brandon Souba inn this group, he helped someone awhile ago and has a few examples.
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?
Thanks Arvi Raquel-Santos! Will do.
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).
Some examples:print Utils.modulate 5, [0, 10], [0, 100] # 50print Utils.modulate 2, [0, 10], [0, 1000] # 200print Utils.modulate 9, [0, 10], [0, 500] # 450
I hope it helps :)
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/
Thank you Adria Jimenez and Balraj Chana for chiming in. I'm starting to get the hang of it :) . Greatly appreciated!