Animations and transitions - manipulate / modify data binding(s)

[YTN0]

I have an animation that I would like to play when triggered (via code), and for the element to then become hidden after the animation is played (and stay hidden until the next programatic trigger of the animation).

I am currently doing this by setting an "ElementVisible" variable which uses a data-visible var for the DIV (to show it). I also use the same visibility var to drive a data-class which attaches a class to the element to start the animation.

I am trying to figure out a way to have the element automatically turn hidden and stay hidden via RML / CSS without having to have a programmatic job waiting (same duration as the animation) to set the variable (that controls visibility and the class) back to false.

Ideally, the animation "to" (viz. end of animation) would be able to modify my visibility var and set that to false i.e.

to 
{
	opacity: 0;
  {{elem-visible}}: false;
}

Any other suggestions as to how I can make this fully self contained within RML / CSS (or if there's a way I can modify my var at the end of the animation)?

[mikke89]

Can you make the same animation using transitions? If so you can set a class instead of the visibility directly, the class style sets visibility and opacity. The transition should animate those same properties.

If you have some more complicated animation, then perhaps a combination of using the animation, but additionally using a class for transitioning the visibility property, might work out. Let me know if you want me to expand a bit on these ideas.

Otherwise, this feature request could apply to this situation, but it's not implemented yet: #506.

[YTN0]

@mikke89 Appreciate the response. Can you expand on your idea a bit more? Not sure if I fully understand your proposal.

The main issue I have is "resetting" the state back to the original (after being hidden) so I can reuse it, and doing this in RML without having to create a Job in my app to "reset the trigger flag"

[mikke89]

To expand on the idea a bit. A simple example:

.my_element {
  visibility: visible;
  opacity: 100%;
  transition: visibility opacity 1s cubic-out;
}
.hide {
  visibility: hidden;
  opacity: 0%;
}

<div data-class-hide="hide_my_element" class="my_element">My element</div>

Now the data variable hide_my_element boolean will control the visibility of "My element" and animate its opacity as appropriate. When the transition is finished to hide, the visibility will fully hide the element. This is a special behavior of animating of the visibility property (see the animation behavior in the documentation). Recently an equivalent behavior was added to the display property too, so you can do the same with display: none if that's a better fit in your case.

I'm not sure if this fully applies to your case, depends a bit on exactly the behavior your want. Otherwise, a complete example would be helpful.

[YTN0]

Thanks for the details! I'll give this a try and circle back on the results.

…

________________________________ From: Michael R. P. Ragazzon ***@***.***> Sent: Saturday, November 1, 2025 11:34:40 AM To: mikke89/RmlUi ***@***.***> Cc: YTN0 ***@***.***>; Author ***@***.***> Subject: Re: [mikke89/RmlUi] Animations and transitions - manipulate / modify data binding(s) (Discussion #857) To expand on the idea a bit. A simple example: .my_element { visibility: visible; opacity: 100%; transition: visibility opacity 1s cubic-out; } .hide { visibility: hidden; opacity: 0%; } <div data-class-hide="hide_my_element" class="my_element">My element</div> Now the data variable hide_my_element boolean will control the visibility of "My element" and animate its opacity as appropriate. When the transition is finished to hide, the visibility will fully hide the element. This is a special behavior of animating of the visibility property (see the animation behavior in the documentation<https://mikke89.github.io/RmlUiDoc/pages/rcss/visual_effects.html#visibility>). Recently an equivalent behavior was added to the display property too, so you can do the same with display: none if that's a better fit in your case. I'm not sure if this fully applies to your case, depends a bit on exactly the behavior your want. Otherwise, a complete example would be helpful. — Reply to this email directly, view it on GitHub<#857 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABHFAFVK7IHMF2UWXAL3POT32TOKBAVCNFSM6AAAAACKZVBFAWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTIOBUGY4DKMI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[YTN0]

@mikke89 Ugh... I just realized from looking through the docs there's a transitionend and animationend event. Using the data-event-transitionend to "reset" the flag fixes my core issue.

With that, either method will work (the one I am using, and the one you suggested).

Appreciate the help, and sorry for the false alarm!

[mikke89]

Ah, I didn't fully realize the behavior you're looking for earlier. And no worries, happy to hear you found what you need!