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

What is Framer? Join the Community
Return to index
Aalok Trivedi
Posted Jan 27 - Read on Facebook

Hey folks,

Having a little trouble hashing out the state logic I should be using for a step by step progress bar.

What I want to happen every time you hit 'Next':
1. The progress bar goes to the midX of the next icon
2. The 'active' black icon scales up to 1.3x
3. The previous icon goes back to 1x scale

here is what I have so far...http://share.framerjs.com/9vjnazdyqzol/

Happy to clear things up if my explanation is a little muddy

4 Comments

Marc Krenn

#1 looks good already (y)

Achieving #2 and #3 would be a lot easier if you'd make the following changes to your sketch file:

* remove all inactive/translucent icons (we'll make them programmatically)
* put all icons in a folder called 'icons'
* re-name the icons to _____Icon

Just post your file after those changes and I'll gladly help you :)

Aalok Trivedi
Aalok Trivedi

Thank you! Pretty much spot on! The only thing is that I want the previous step icon to remain black (i.e go to location step --> genderIcon scales = 1 and color/opacity = 1, instead of returning to original opacity)

Read the entire post on Facebook