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

What is Framer? Join the Community
Return to index
Sean Thompson
Posted Aug 17 - Read on Facebook

Hey all,

In the video-player Fiber example, I am wondering what the following line does:

“JessPost.onMove ->
Reply.scale = Utils.modulate this.x, [20, 120], [0.5, 1], true”

I get it conceptually but do not understand where the values [20, 120] and [0.5, 1] come from? Do the first set of values deal with scale and the second with opacity?

Also, could this not have been achieved with two states (a default and larger state), instead of “Utils.modulate.x”?

Thank you so much!


Paul Stamatiou

It could be done somewhat with states but the modulate lets it happen with a direct correlation to some value, in this case the x value of JessPost. Modulate takes this.x which in this case refers to JessPost.x and then it takes two ranges that it translates the values between. So they manually set the X value range of 20 to 120 (just the X positions they want the JessPost to be within before it starts doing anything) for it to react to and translate to a different value that can be used for anything (in this case the scale value of Reply). So here when the X value is 20, the outputted value is 0.5, when the user keeps moving closer to 120 it becomes the full 1 value. You can see what's happening exactly as you drag it if you place print this.x and print Reply.scale at the end of that onMove code block 😀

Sean Thompson

Thanks Paul Stamatiou! I’ll think about this one for a bit haha 🤔

Jurre Houtkamp

Hi Sean,

When you slide the second comment by 'Jess Humphreys' to the right a reply button will scale up from behind it. The utils.modulate translates one value into another so in this case. x 20 is the initial position of the comment. When the comment is at position x 20 I want the reply button to be at scale 0.5. When the comment is at position x 120 I want the reply button to be at scale 1. The utils.modulate translates and animates all the other values in-between that.

A nice way to see and understand a little bit better is by adding the line

print this.x , this will print the x value of the JessPost when moving it and will show you where the 20, 120 values come from.

JessPost.onMove ->
– print this.x

Read the entire post on Facebook