Stripe style button transitions

Need help Responsiveness
1

Hi all,
I’m using the new responsive engine and I’m trying to reproduce this transition that Stripe uses for its buttons (on the Stripe dashboard for developers).
GIF Recording 2022-05-26 at 2.30.19 PM

I have 2 questions:
A/ There is no transition in the property editor for “align to parent = center”. I’m talking about this:

image
image341×645 29.3 KB

So it looks like I can’t do the transition of the icon moving from right to center. Note that my icon is in a group that is set to “align to parent”. I thought about setting a condition that increases the “right margin” to effectively center the icon on my button and set a transition on “right margin” but the width of my button varies with the width of the page. Essentially I would need a transition on “align to parent : center”

B/ What condition can I set for the transition to happen. Essentially, i want it to happen when the workflow triggered by this button is finished (e.g. user is logged in or form is filled in etc.). Is there a generic condition that i can use for all these buttons?

thank you!

2

Hi @42.decaen !

The Transitions are now in the bottom of the Appearance tab :wink:

3

Thank you @rpetribu !
Sorry, my question was not clear. Some transitions are missing in the appearance tab. For example, while you have transitions available for left margin or right margin, there is no transition for align to parent = center
Does my question make sense?
thank you!

4

Hi @42.decaen !

Yes, not all of them are avaliable, but you still can achive the same result:

Take a look in the Editor :wink:

5

Wow, this is genius @rpetribu ! Thank you, i just implemented your solution in my app. Works like a charm!

1 Like