Animated button that changes to another variant & opens a new frame on click

Interactive Components Questions
1

Hi everyone!

I want one of my smart animated components, a button, to do two things when it is clicked.

  1. Change to a variant - so it goes from the unselected to the selected state.
  2. Trigger the opening of the next overlay

This is so that the user sees the button that they click change briefly before the next overlay opens.

I can do both of these in isolation and I can make it work in a dumber way with an interim screen, but I can’t get it to work in one step. Any advice very welcome!

Thanks

Duncan

2

I’ve been experimenting with this the past few days, and creating an encapsulated variant with a delayed navigation trigger doesn’t seem possible. I can do it without using variants, but that, like you said, feels like the “dumber” way.

I’d love to see if anyone else here has pulled off this use case within a variant, and make it reusable. (The technique I tried was overriding the instance of a variant state for a navigation, and using some smart animation hackiness to force a delay.)

2 Likes
3

Hi @Duncan_Bell, I made an example of a prototype which you can see on the links below.

Design file:

Prototype:

Is this what you expected?

6 Likes
4

tank666 - I think you’ve nailed this, thank you so much. I will try and replicate this with my design system this afternoon. :smiley: :clap:

6

@tank666 I just wanted to say thanks again. I got this working with my own components today. Really nice solution that will save me a load of time.

:muscle::clap:

2 Likes
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.