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

What is Framer? Join the Community
Return to index
Metin Saray
Posted Dec 10 - Read on Facebook

Hi guys,

I'm working on a pull to refresh action, and i have a solid in the top bar that has 0 opacity.

On DragMove, i want this opacity to go from 0....1 but with the numbers in between. As i drag it down, it should be more visible. Should i do it by mapping the 0 and 1 to get more values? I know how, but i just cant implement it. Can you help?

Thx in advance.

6 Comments

Metin Saray

Oh, also as i drag my content area down, i want it to resize it's height to follow my content too, i guess that's about the same thing but still..

Jorn van Dijk

Yup, that can be done with modulate – http://framerjs.com/docs/#utils.modulate

Metin Saray

Well, it was a bit complicated for me, so i just found a trick to follow my objects Y position and i'm trying to set my solid.height to object.y

content.on Events.DragMove, ->
solid.height = parseInt content.y

content.on Events.DragEnd, ->
content.y animate : 300
solid.height = object.y

On DragEnd though, for some reason my content behaves but solid does not listen to it. I tried animate or tried to set it instantly but no luck (i simplified the code it's not like that in the actual prototype btw)

Andreas Wahlström

try something like:
content.on Events.DragMove,->
solid.opacity = utils.modulate content.y, [0,300], [0,1], true

this converts the value of content.y from the scale 0-300 to 0-1, which you can use to set the opacity on the solid layer.

Metin Saray

Andreas Wahlström Thanks a lot, that actually worked, i guess i used the modulate in a reverse way.

Chad Lonberger

Thanks for the mention of modulate, I've been building similar (calculating deltas per drag position) manually and this will make life easier 👍

Read the entire post on Facebook