[CSS, JS] 꽃이 흔들거리는 효과 구현하기

꽃이 바람에 흔들거리는 애니메이션을 CSS 버전과 JS 버전으로 각각 구현해 비교해보려고 합니다.

< HTML >

<img src="https://cdn.pixabay.com/photo/2023/01/26/18/09/yellow-flowers-7746722_960_720.png" class="flower">

먼저 꽃 이미지를 불러옵니다.

---

- CSS Ver.

< CSS >

img.flower {
    transform-origin: center bottom;  // rotate 기준을 bottom 으로
}

transform-origin은 transform 속성을 사용할 때 사용한다.

초기값은 center로 transform-origin: 50% 50%;이다.

transform을 사용할 요소의 기준점을 정한다.

 

꽃이 흔들거리는 걸 표현하려면 X는 center(50%) Y는 bottom (100%) 이어야 원하는 모양으로 나온다.

| 참고 자료 |

transform-origin - CSS: Cascading Style Sheets | MDN

 

img.flower {
  animation: swaying-flower 3s infinite ease-in-out;
}
@keyframes swaying-flower {
  0% {transform: rotate(-10deg);}
  50% {transform: rotate(10deg);}
  100% {transform: rotate(-10deg);}
}

transform: rotate 속성을 사용해 이미지 회전을 반복해 주는 keyframe을 실행합니다.

 

꽃이 -10 deg에서 10 deg로 갔다가 다시 돌아오는 것을 반복해야 하기 때문에 keyframe을 3개로 분리했고,

animation의 기본 easing을 ease-in-out으로 추가하여 좀 더 바람에 흔들리는 것처럼 구현해 봤습니다.

 

---

- JS Ver.

< CSS >

img.flower {
    transform-origin: center bottom;  // rotate 기준을 bottom 으로
}

JS 버전 기본 CSS는 위와 동일합니다.

< HTML >

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>

JS 버전에서는 gsap라는 자바스크립트 라이브러리를 사용해 구현했습니다.

css나 일반 Javascript만으로도 애니메이션을 구현할 수 있지만,

gsap는 애니메이션에 최적화된 라이브러리이기 때문에 사용하기 간편하고 호환성이 좋습니다.

< JS >

gsap.fromTo(".flower", {
  rotate: -10,
}, {
  rotate: 10,
  duration: 1.5,
  repeat: -1,
  yoyo: true,
  ease: 'power2.inOut',
});

 

fromTo는 말 그대로 ~로부터 ~로라고 생각하면 됩니다.

꽃이 rotate -10deg에서 10deg로 움직이도록 표현하였고,

duration은 -10deg에서 10deg로 가는 시간입니다.

repeat: -1는 css의 animation: infinite와 같습니다.

yoyo는 -10deg에서 10deg / 10deg에서 -10deg로 반복하겠다는 의미입니다.

ease 역시 css의 easing과 동일한데 gsap에서는 훨씬 다양한 easing을 제공하므로

흔들리는 꽃을 좀 더 효과적으로 표현할 수 있습니다.

 

 

| 참고 자료 |

Docs

---

-  합쳐진 코드

CSS버전과 JS버전을 비교할 수 있는 코드입니다.

두 버전의 easing이 달라서 흔들리는 속도감도 달라 보이는 모습을 볼 수 있습니다.