Forum Academy Marketplace Showcase Pricing Features

How to animate set states

I know you can animate hiding and showing elements, but 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

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)

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

it’s a group for each step

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.

  1. 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.

  2. 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.

1 Like

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

1 Like

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

1 Like

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

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