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

What is Framer? Join the Community
Return to index
Dan Clarke
Posted Oct 24 - Read on Facebook

Hey everyone, here's a tough one (I think).

I'd like to mockup a control dial that controls the opacity of a layer. When the user clicks and drags on this dial, the dial should rotate and the opacity of the target layer should change based on the mouse Y co-ordinates.

If the user drags up the dial rotates clockwise and the opacity of the target layer increases

if the user drags down the dial rotates anti-clockwise and the opacity of the target layer decreases

hmmmm....

8 Comments

Jordan Robert Dobson

Here you go! http://jrdn.io/c3ki

Now just use Utils.modulate to update the opacity of a layer with the rotation.min / max values to translate to the 0/1 of opacity

Jordan Robert Dobson

I think what you really want is detecting a circular motion.

Sergio Majluf

that hits the point cause if/when someone tries to actually "rotate" the dial, the variable changes oddly (up then down)

Joshua Tucker

Hi Dan! You sir are in luck. Benjamin Zanatta posted a question a few days ago about how to rotate a wheel (https://www.facebook.com/groups/framerjs/permalink/711426172317790/) and I decided to take up the challenge. I was finishing it up when I saw your question here.

I retrofitted my example for him to show you how could use a dial to control a layer's opacity. A lot of crazy math, but I think you could tailor the logic to fit your purpose.

http://share.framerjs.com/zcn4ufldgkqp/

Dan Clarke

Gentlemen, I've had a busy weekend so not looked at this in detail yet but this is fantastic! many thanks

Joshua Tucker

Dan Clarke Cheers man! Let us know if this gets you up to what you need.

Dan Clarke

Will do!

Jordan Robert Dobson

Josh Ackerman - I think these posts are what you need.

Read the entire post on Facebook