How to animate variation selection, then after delay, move to next view

Ask the community
1

I’ve created a modular widget for multiple-choice questions, with a layout like this:

Question?

  • CHOICE 1
  • CHOICE 2
  • CHOICE 3

My goal is to provide visual feedback when a choice is selected by changing the button’s background color. After a brief pause, the prototype should then transition to the next view.

The issue I’m facing is that both actions—highlighting the button and moving to the next screen—happen simultaneously, causing the button’s visual feedback to be skipped entirely.

I’ve also tried combining onclick and onkeydown events, but that hasn’t solved the problem.

Could you help me figure out what I might be doing wrong? :pensive:

2

Here’s a link to an example of both methods that I have tried…

I made a working file but i’m unable to upload it…

3

have you tried adding after delay for the transition to the next view function?

4

Thanks for replying!

image
image894×648 26.2 KB

I don’t get the option to adding a delay. In this image you can see ive stacked the button activation and navigation into a single interaction. It simply ignores the first interaction and navigates to the next view. I’ve also tried adding a transition animation and applying the render time to the animation… however, that didn’t work either.

5

image
image894×648 26.2 KB

Here you can see where I attempted to add an ‘onclick’ and ‘onmousedown’ interaction

I’m at a loss here. I’m not sure how else to approach this issue.

6

Yes, it will look like it just skipped the change to function because they’ll run simultaneously(difference of 1ms is like simultaneously). So, you need to add a delay before navigation function runs.

Like this:


Navigation starts after the set delay once the button is clicked

2 Likes