CSS - [ Easing ]

https://greensock.com/docs/v2/Easing

여기서 Type (easeIn, easeOut, easeInOut) 과 강도 (Power) 에 따라 요소의 움직임을 확인할 수 있다.

 

아래쪽에 보면 코드가 뜨는데, 여기서 to 메서드의 매개변수로 현재 화면에 나타나는 움직임의 (요소, 시간, 옵션)이 뜬다.

easeInOut으로 반복 재생하면 움직임이 끊기는 듯한 느낌 없이 부드럽게 움직이는 느낌을 줄 수 있다.

easeInOut, power1로 설정

 

떠다니는 이미지 효과를 줄 때 아래와 같이 코드를 작성했다. 위의 코드에서 TweenMax를 gsap으로 대체했다고 보면 된다.

---