Animated reveal and hide using Animations?

I would like to have a similar effect to that of Bootstrap Collapse Bootstrap 4.4 Collapse where a DIV is revealed over say half a second rather than simply appearing and disappearing.

Can it be done with Wappler Animations?
Or is there another better way?

I have quite a few Show/Hide attributes dotted around the site, either using a button or dynamically with server connect.

I have tried Toggle Class collapse with no success.
I have tried Show/Hide applying collapse class with no success.

1 Like

You can use animated region and select the animations for it:

Move your content inside it.

The animated region has its own dynamic attributes which can be used to show and hide it:

And you can control them with a variable value …

Screenshot_33

So pretty similar to this: https://docs.wappler.io/t/toggle-any-element-visibility/3882 but you just use the variable value with the animated region animate visibility dynamic attribute.

Another way would be to just apply some dynamic class to the element and style it in your css to use some transition effects etc.

2 Likes

Brilliant, thanks Teodor, I’ll get onto that straight away.
Thanks for the fast and clear response as always.