[Animation] The animation controls lack the flexibility of MDB.

[hikerell]

Describe the bug I want to implement the staggered loading animation for the "John Doe" and "WEB DEVELOPER" texts as seen on this website: https://ascensus-mdb-uikit-tutorial.mdbgo.io/.

The "WEB DEVELOPER" text should be hidden by default and fade in with a delay of 400ms using the fade in animation.

When trying to achieve this with Animation in tw-elements, I noticed it lacks support for something like data-mdb-toggle="animation", causing the "WEB DEVELOPER" text to be visible by default. It then blinks out after 400ms before fading back in.

The website mdb implementation code: <h1 data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="400" >Web developer</h1>

my unworked tw-elements implementation code: <h1 data-te-animation-init data-te-animation-start="onLoad" data-te-animation="[fade-in_1s]" data-te-animation-show-on-load="false" data-te-animation-delay="400" >Web developer</h1>

my fixed code: <h1 data-te-animation-init data-te-animation-start="onLoad" data-te-animation="[fade-in_1s]" data-te-animation-show-on-load="false" data-te-animation-delay="400" style="animation-fill-mode: forwards;" class="opacity-0" >Web developer</h1>

To Reproduce

Expected behavior I hope to have support for the data-te-toggle="animation" functionality, rather than always needing to manually specify opacity-0, animation-fill-mode: forwards, and the fade-in animation.

For example, I want to implement a div flying in from the right with a delay of 3000ms after page load. my expected code <h1 data-te-toggle="animation" data-te-animation-init data-te-animation-start="onLoad" data-te-animation="[fly-in-left_1s]" data-te-animation-show-on-load="false" data-te-animation-delay="3000" >Web developer</h1>

my actual code: <h1 data-te-animation-init data-te-animation-start="onLoad" data-te-animation="[fade-in_1s_ease_3s,fly-in-left_3s_ease_3s]" data-te-animation-show-on-load="false" data-te-animation-delay="0" style="animation-fill-mode: forwards;" class="opacity-0" >Web developer</h1>

Actual behavior Show your code Desktop (please complete the following information): Smartphone (please complete the following information): Additional context

Make sure it is indeed an issue/bug report

• If it's a general support question (you just can't figure out how something works), but not an issue with the UI Kit or documentation itself it's better to ask here: https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/support-from-community
• If it's an idea for a new feature, but you cannot write the code for it yourself, it's better to ask here: https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/share-ideas-request-features
• If it's general feedback, it's better to post it here: https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/kind-words-general-feedback

[iprzybysz]

Hi, in MDB, the data-mdb-toggle="animation" attribute is used to initialize the Animation component. In TWE, we use the data-te-animation-init attribute for the same purpose. For now, there's no other way to get the effect you want without using these styles. We'll work on adding the beginHidden option in the future, which will remove the opacity-0 class after the animation is done. But it'll mean adding the opacity-0 class to elements too.