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

What is Framer? Join the Community
Return to index
Mike Feldstein
Posted Mar 16 - Read on Facebook

Someone had talked about tweaking values on the fly in a prototype recently, and I just dug up a rough ControlPanel module i had written (long before the days of modules, its much easier now). here's an example: http://share.framerjs.com/yjofo5jnxute/

It's nothing special, but it demonstrates a nice easy API for creating a control panel to change values of stuff while you're using the prototype.

options = [
{label: "Red", value: "#F00"},
{label: "Green", value: "#0F0"},
{label: "Blue", value: "#00F", selected: true}
]
controlPanel.addRadio "Button Color", options, (value) ->
button.backgroundColor = value

Right now it only allows switching discrete values, but if people want it can easily be extended to have sliders and maybe even text inputs.

10 Comments

Mike Feldstein

I've found it useful for changing spring values while i let people play with it, or for more complex prototypes you can show the interactions with different value sets to try out different use cases.

Zoltan Ray

Nice! I'm going to use it for an animation speed slider. Been using a global multiplier for a while but being able to adjust in context will be really handy

Mike Feldstein

Lemme know if it works! it's super rough, i will try to make it nicer (visually and codewise)

Mike Feldstein

If any visual designers out there want to sketch up a nicer looking design i can implement it... jussayin

Mike Feldstein

This is a class for FramerJS projects, its not a standalone tool.

Kevin Cannon

Great. This needs to be a module!

Kevin Cannon

Great. This needs to be a module!

Tisho Georgiev

Those interested should take a look at dat.GUI, which has been around for a while and offers a lot of what Mike Feldstein is proposing and more. Here's an overview and tutorial: http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage. I hacked together drop-in integration of it with framer for animation control a while back: https://github.com/tisho/framer-animation-controls

Mike Feldstein

Yea I guess building it on top of datgui would be smarter. How's their touch support?

Tisho Georgiev

Not great, but that's easy to fix.

Read the entire post on Facebook