Skip to main content
Question

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

  • September 16, 2024
  • 5 replies
  • 35 views

Alan_Herron

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? 😔

This topic has been closed for replies.

5 replies

Alan_Herron
  • Author
  • 5 replies
  • September 16, 2024

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…


Raphael_M
  • Power Member
  • 394 replies
  • September 17, 2024

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


Alan_Herron
  • Author
  • 5 replies
  • September 18, 2024

Thanks for replying!


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.


Alan_Herron
  • Author
  • 5 replies
  • September 18, 2024

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.


Raphael_M
  • Power Member
  • 394 replies
  • September 19, 2024

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings