부드러운 애니메이션을 위한 FLIP 테크닉

height, width, top, left 같은 속성의 변화는 레이아웃(리플로우)을 유발한다.

그러면 브라우저는 다른 엘리먼트에도 레이아웃 변화가 있는지를 재귀적으로 확인해야하고

이를 계산하는 데에는 많은 비용이 든다. 

 

만약 그 계산이 애니메이션의 1 프레임(약 16.7ms)보다 오래 걸리면

애니메이션의 프레임은 제 시간에 렌더되지 못하고 스킵되기 때문에 사용자 입장에서는 버벅거리는 것처럼 보인다.

그래서 height 같은 속성들을 이용한 애니메이션은 종종 버벅거리는 경우가 많다.

 

부드러운 애니메이션을 위해서는 최대한 적은 변화를 최대한 빨리 계산해야하고,

이를 위해서는 transform과 opacity로만 애니메이션을 구현해야한다.

그리고 FLIP 테크닉은 transform 속성만을 활용하여 애니메이션을 구현하는 방법을 다룬다.

 

우선, FLIP은 'First, Last, Invert, Play'의 약자이고

Chrome Dev Summit에서 Paul Lewis에 의해 처음 소개된 테크닉이다.

(처음에는 FLIP이라는 명시적인 네이밍 없이 소개되었다고 한다.)

FLIP 테크닉의 개념은 생각보다 간단하다.

 

1. First - 애니메이션에 포함되는 요소의 처음 상태(주로 위치)를 저장.

getBoundingClientRect를 주로 활용

 

2. Last - 요소의 마지막 상태(애니메이션이 끝난 후의 상태)를 저장

 

3. Invert - 현재 우리는 요소의 처음 상태와 마지막 상태를 알고 있다.

여기서, 마지막 상태에다가 transform이나 opacity의 변화를 적용하여 처음 상태를 만들어야한다.

(이걸 보고 invert라는 표현을 사용한 듯 하다.)

예를 들어, 요소가 처음 위치에서 아래로 90px만큼 움직이는 애니메이션이라고 해보자.

그러면 요소를 마지막 위치에 놓는 대신 transform Y에다가 -90px를 적용해주는 것.

이렇게 하면 해당 요소는 처음 위치에 있는 것 같지만, 사실은 아니다.

(원래는 마지막 위치에 놓여져 있지만 transform에 의해 처음 위치로 옮겨진 상태다)

 

4. Play - 애니메이션(transition)을 적용하고, transform이나 opacity 속성을 사용해 만들어줬던

'가짜' 처음 상태를 삭제해주면 된다. (위의 예시로 치면 transform Y에 -90px을 적용해줬던 걸 삭제)

그러면 처음 상태에서 마지막 상태로 자연스럽게 전환되는 애니메이션 완성.

 

코드를 통한 구체적인 예시는

https://aerotwist.com/blog/flip-your-animations/ 나

https://css-tricks.com/animating-layouts-with-the-flip-technique/

로 가면 확인해볼 수 있다.

element.style.transform 말고 Web Animations API라는 게 있드라.

그걸 활용한 예시가 많은 듯.

 

FLIP 테크닉을 손쉽게 구현하기 위한 Flipping이나 react-flip-toolkit 같은 라이브러리들도 있다.