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.

[AnnaYuS]

I'm having the same problem. I need to skip animation for tooltips in a list of labels. I've tried out @andrew-boyd solution with returning empty keyframes, but this removes animation for all the actions too. I ended up taking default keyframes from the source code, then it worked:

autoAnimate(parent, (el, action, oldCoords, newCoords) => {
    // Do not animate tooltip
    if (el.hasAttribute('data-tippy-root')) {
      return new KeyframeEffect(el, [])
    }

    let keyframes

    // Use default animation settings from @formkit/auto-animate source code
    if (action === 'add') {
      keyframes = [
      ...
      ]
    }

    if (action === 'remove') {
      keyframes = [
        ...
      ]
    }

    if (action === 'remain') {
    ...
      keyframes = [start, end]
    }

    return new KeyframeEffect(el, keyframes, { duration: 250, easing: 'ease-in-out' })
  })
}

it seems like it could be done in an easier way. Maybe someone could help? Is there a way to "continue" with the defaults instead of overriding them?

[yabdab]

I am having the same issue. Has anyone figured a way to just ignore certain items without having to rewrite all the override code?