Anime.js / Vue – Transform/translate not working as expected

by

I’ve got this notifications container below.

<template>
  <TransitionGroup
    v-for="(containerPosition, index) in CONSTANTS.POSITIONS"
    ref="notificationsContainersEl"
    :key="index"
    :class="classes(containerPosition)"
    :data-position="containerPosition"
    tag="ul"
    :css="false"
    @enter="onEnter"
    @leave="onLeave">
    <UNotification
      v-for="notification in cLimitedNotifications[containerPosition]"
      :key="notification.id"
      v-bind="notification"
      tag="li"
      role="listitem"
      @close="onClose"
      @timeout="onTimeout" />
  </TransitionGroup>
</template>

And the following onEnter function

  const onEnter = (el, done) => {
    const parent = el.parentElement
    const siblings = getSiblingsBefore(el)

    adjustContainerHeight(parent)

    const elTransform = calculateNotificationTransform(el, 'enter')
    const siblingsTransform = calculateSiblingsTransform(el)

    const tl = useAnime.timeline({
      duration: 500,
      complete: done,
    })

    tl.add({
      targets: el,
      easing: 'easeOutQuart',
      opacity: [0, 1],
      ...elTransform,
    }).add({
      targets: siblings,
      ...siblingsTransform,
    })

    el.scrollIntoView()
  }

For some reason the translateX: [‘100%’, 0] on the Anime options it’s not working.

The expected behaviour would be to translate from outside it’s position to current position.

All helper functions return correct.

I’ve tried pretty much everything:

Logged everything and it seems to be returning correct, useAnime is getting the correct options.

If I set translateX: [AnyValue, AnyValue !== 0] translation works fine.

Leave a Comment