Animated score indicator


I’m creating an application where the users are supposed to vote for entries in competitions. And resonably enough I’d like a super smooth animation visualizing that they’ve chosen a new score.

The application looks like the screenshot below, and as you can see I’ve selected the ever-classic circle to visualize the active choice.

But right now the circle is just a circle and nothing more. What I want to achieve is when pressing a number, I’d like the circle to move from the current number to the selected number. I guess this have to be done with some sort of active parameter, but that’s where my ideas stop.

Any suggestions on how to solve this?

Project included for convenience. The component is generated in VoteComponent.ux, and the specific vote component is at line #45


You can achieve this using MultiLayout.

Check out this example, which basically does the same thing with a tab bar.

I actually looked at MultiLayout at first, but I guess I missunderstood the concept. Got it together now, thanks! :slight_smile: