Qfyilyi

I am writing a wrapper to animate DOM movement through the FLIP method. FLIP stands for First, Last, Invert, Play. https://aerotwist.com/blog/flip-your-animations/

I am wondering if the FLIP technique is outdated? Or is there something I am missing to get it to work correctly?

As I understand it, the technique goes like this:

1. Use getBoundingClientRect to get the initial and final position of the element you want to animate.


2. Use CSS transform to move the element back to its initial position.


3. Add CSS transition styles to the element.


4. Play out the movement by removing the CSS transform from step 2.

FLIP is supposed to optimize movement animation so that every movement is done with requestAnimationFrame and CSS transform, and all animations are under 60fps.

However, I have hit some issues:

Issue #1. Movement is not always under 60fps, so sometimes the animation is jerky.

Issue #2. My animation will not work unless I have two requestAnimationFrames-- one in the invert step and one in the play step. I initially thought I would only need to request one frame in the play step because that's where the animation occurs.

Here's what my code looks like for the invert and play steps:

invert = () => {

     changeY = first.top - last.top

     changeX = first.left - last.left

     requestAnimationFrame(() => {

        el.style.transform = `translate(${changeX}px, ${changeY}px)`;

        play();

    })

}



play = () => {

    requestAnimationFrame(() => {

        el.classlist.add(animationClass);

        el.style.transform = 'none';

        el.addEventListener('transitionend', transEnd);

    })

}