How to animate set states

14rk45 · 2022-01-20T04:31:09.329Z

I know you can animate hiding and showing elements, but can i also animate setting states?

sudsy · 2022-01-20T04:54:05.933Z

14rk45:

can i also animate setting states?

Couldn’t the relevant element be animated when the state is set? I mean, setting states and animating elements are both workflow actions, so why couldn’t you just do them both in the same workflow? An element that is already visible will still animate.

-Steve

14rk45 · 2022-01-20T17:57:22.059Z

I have a workflow to set the state of my signup flow, each step of the signup flow is a new state. When the “continue” button is pressed, the state is set to +1 as i numbered the states. when i animate an element, it asks me to pick 1 element, rather than just allowing me to choose the result of the first workflow run (setting states)

sudsy · 2022-01-20T18:30:10.094Z

Which element are you wanting to animate? Is it a different element for each step? Is it the same type of element for each step?

-Steve

14rk45 · 2022-01-20T19:02:16.850Z

it’s a group for each step

aj11 · 2022-01-20T19:32:43.706Z

This is also something I’ve looked for in the past and its annoying there’s not a transition setting for visibility. There are a couple solutions I’ve discovered.

You can write custom css that hides and shows elements in an animated way based on states. This is tricky though and took me weeks to get right in my app. I used Classify for this with good results, but it would be a lot of work to try and lay out step by step. Just search google for the correct css and use Classify in the states instead of regular visibility.
Instead of setting an element to visible when a state is set to something, you can use conditional triggers to animate in an element when the state is something and also to animate it out when the state is not that something anymore. I found this solution to be rough on performance, but it could work just fine depending on how often the element is used in your app.

14rk45 · 2022-01-20T22:04:31.219Z

it would be a lot simpler if it was built-in, i’m just going to leave out animations for now and hopefully they add this in the future. @emmanuel

sudsy · 2022-01-20T22:38:53.874Z

14rk45:

it’s a group for each step

Is only one group/step visible at a time? If so, could you put all of them inside another group and animate that parent group for each step?

-Steve

aj11 · 2022-01-22T20:11:40.488Z

That’s an interesting idea I hadn’t thought of.

system · 2022-03-31T04:31:51.797Z

This topic was automatically closed after 70 days. New replies are no longer allowed.