Animated score indicator

How-to Discussions
1

Hi!

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?

Screenshot
ytw6zBC.png361×660

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

Project

2

You can achieve this using MultiLayout.

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

https://www.fusetools.com/community/examples/tabsmultilayout

3

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