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

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

Hey all,

I am trying to learn more about Utils.modulate with the following exercise:

I am trying to make a layer called “replies” fully opaque when it’s on-screen at a certain y-position, and less opaque when it’s off-screen at another y-position.

To do so, I have “replies” inside a FlowComponent called “flow”

I then wrote the following:

flow.onScroll ->
replies.opacity = Utils.modulate(replies.y, [531, 162], [.6, 1.0])

Second, less elegant implementation question:

When I could not get Utils.modulate to work I set up the following two states:

replies.states =
dim:
opacity: .6
options:
time: .3
brighten:
opacity: 1
options:
time: .3

This worked until I tried to tie “brighten” to scrolling up and “dim” to scrolling down. Any idea why this would not work?

flow.onScrollStart ->
if scroll.direction is "up"
replies.animate "brighten"
if scroll.direction is "down"
replies.animate "dim"

Thank you!

3 Comments

Steve Ruiz

I'd stick with the first option. Pulling a layer's y property off of a scroll event is a common problem, because a layer's y is always relative to a layer's location on its parent. This means that even if the layer's parent is moving, the layer's y stays the same. Better to use layer.screenFrame.y, which returns a more literal screen position. Another tip is to turn on the limit parameter of Utils.modulate, to keep it from over adjusting when above or below the numbers you set. So for you, the fix would probably be: Utils.modulate(replies.screenFrame.y, [531, 162], [.6, 1.0], true)

As for the onScrollStart, the direction property is set only after the layer has moved for a certain distance, so accessing it at the start of the scroll is unreliable -- it'll usually return null.

Andy Yang

Hi Sean! Make sure you're scoping the scroll object correctly, and use scrollY to get the scroll position. Here's an example that uses Utils.modulate to change the opacity based on scroll position. https://framer.cloud/COlNs

Sean Thompson

Thanks guys! Yeah, I think it’s totally related to me incorrectly scoping the scroll object.

Read the entire post on Facebook