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

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

Hi everyone

I'm trying to create a meter in Framer, like an audio meter you'd find on a hifi. I have 9 states to show and have 9 groups from Sketch to show this. I need to change between all of these states, displaying one at a time but in a random way. I know there is a Utils object for randomNumber but just thinking how I should do this?

I need to assign a Sketch group to a layer and then add the other groups as .addState and then randomly toggle through using nextstate = myRandomNumber

just not sure how to go about adding the Sketch groups to layers and states in this way?

13 Comments

Arron J Hunt

Can you share your project files?

If each stake looks different: you'll need to add them to an array, select a random object from the array, and display it while hiding the rest.

Jordan Robert Dobson

Random choice or random number would work. You could just run a loop that calls itself.

Jordan Robert Dobson

The emitter I run in the video walk through I posted would be simple enough to run and update a UI like that.

Dan Clarke

thanks all, right now i haven't really got a project to share! Jordan Robert Dobson I watched your video and it was great! very useful, but I need to get over my initial hurdles. I'm wondering if I should go down the array route or adding sketch groups to layers, but not sure on how to do that?

Arron J Hunt

Can you show the sketch file? I'm still a little unsure what you want to do :)

Jordan Robert Dobson

I would break apart the problem simply. It's hard to tell the difference between the states. Can you show a visual example of what you're attempting to do?

Dan Clarke

Sure guys, here's the 'project'
http://share.framerjs.com/xh8ylubqe7tr/

Dan Clarke

I'm trying to get a meter that goes up and down like you may find on a graphic EQ

Arron J Hunt

Here you go. Take a look at the comments, I tried to annotate the best I could http://share.framerjs.com/txyjztngmc7e/

Dan Clarke

That's excellent Arron J Hunt. I'm just reading my way through it now. So do you find it easier to just import images than use sketch import for things like this?

Jordan Robert Dobson

I typically like importing images. But I'm kinda used to building webpages and thinking about my image components in pieces.

Arron J Hunt

Dan Clarke honestly yes. Unless it's a full screen app I'm importing, I prefer to just import individual images. Personal preference :)

Also you may notice I added a function to flip it around. The source images came from the top. I'm not sure if that's what you wanted so you can just remove those lines to flip it back (or set flip=false)

Dan Clarke

Yeah I saw that Arron J Hunt, a good thing to have in there to try things out :) I think what I'm gonna do next is change things in the code and see how it breaks, may be a useful way to learn!

Read the entire post on Facebook