Frame rate when using velocity is low compared with using css transform and transition

[sub/dance]

macOS latest

• VelocityJS version: latest
• Browser: chrome
• Operating System: macOs

Checklist

• Is this an issue with code?: maybe
• Is this an issue with documentation?: maybe
• Have you reproduced this in other browsers?: yes
• Have you checked for updates?: yes
• Have you checked for similar open issues?: no

overview

I am using velocity in vue.js. As vue.js document said, I combined velocity with vue transition hooks like this:

<transition
      @before-enter='beforeEnter'
      @enter='enter'
      @leave='leave'
>
      <img 
        ref='img'
        v-if='isFloatingImgShow' 
        class='floating-img' 
        src="../assets/logo.png"
>
</transition>

in css

.floating-img {
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
}

and in my script, the enter hook call back function

enter(el, done) {
      Velocity(el, {opacity: 1}, {duration: 1000});
      Velocity(el, 
        {
          right: 0,
          bottom: 0,
          transform: ['translate(0, 0)', 'translate(50%, 50%)']
        }, 
        {
          duration: 1000, 
          delay: 3000,
        }
      );
    },

and now the question is, when the el is transforming to the bottom right of the screen, the frame rate is low, not smooth at all.

but if I use css to controll transform like this:

enter(el, done) {
      Velocity(el, {opacity: 1}, {duration: 1000, complete: () => {el.classList.add('aa')} });
    },

.aa {
    transition: 1000ms;
    right: 0;
    bottom: 0;
    transform: translate(0%, 0%);
  }

then every thing works pretty smooth.
So is the way I use velocity went wrong that caused this?

[Arthur]

How did you go about this issue?

I'm trying to do a staggered list transition that doesn't animate height and I notice a similar behaviour.

[Arthur]

I went with Anime.js.

beforeEnter(el) {
        el.style.opacity = 0
        el.style.transform = "translate(0, 26px)"
      },
 enter(el, done) {
        const delay = el.dataset.index * 200
        setTimeout(function () {
          anime({
            targets: el,
            opacity: 1,
            translateY: -26,
            easing: 'easeInOutQuad',
            duration: 500,
            complete: done
          })
        }, delay)