Anyway to block auto-animate from appearing on certain child elements?

[eastlin7]

I have a setup essentially looking like this:

<parent>
          <modal /> 
          <Element /> 
          <modal /> 
          <Element /> 
          <modal /> 
          <Element /> 
          <modal /> 
          <Element /> 
</parent>

The modals are from an external library (Materialize) and right now due to auto-animate the Modal pop-up animation is quite funky as the animations are conflicting, anyway I could disable Auto-animate on the child Modal elements?

[justin-schroeder]

There's not any way to block the animations from running on the children "out of the box" — but you could do so with a custom plugin since the plugin receives each element that needs to be animated, you could just not animate ones you didnt want animated.

Realistically this is unlikely to change — the interaction of siblings next to each other in most scenarios requires a wholistic accounting of every elements position. I'd recommend changing the structure of those elements.

[eastlin7]

Working on a quite tight deadline and restructuring so the modal being outside of the parent would be a bit hard currently. (and the issue is purely cosmetical)

I see the plugin section, and I see that I can touch all the elements, but I'm unsure how I would go about just not animating if element == modal.

Any chance you could give some guidance on how to accomplish that? :)

[andrew-boyd]

@eastlin7 Take a look at the plugins section of the doc — just return empty keyframes if you don't want to animate. https://auto-animate.formkit.com/#plugins The docs show responding to different actions, but you could have an earlier block that sniffs out if the element in question shouldn't animate (perhaps a data-no-animate attribute or similar you could re-use across your project?) and just returns a KeyframeEffect with no animations set.