[애니메이션] 둥둥 떠있는 요소

html

<!-- in HEAD -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js" integrity="sha512-nTHzMQK7lwWt8nL4KF6DhwLHluv6dVq/hNnj2PBN0xMl2KaMm1PM02csx57mmToPAodHmPsipoERRNn4pG7f+Q==" crossorigin="anonymous"></script>
  
<!-- in BODY -->
<div class="wrapper">
  <img src="https://placeimg.com/100/100/any" alt="" class="floating1" />
  <img src="https://placeimg.com/100/100/any" alt="" class="floating2" />
  <img src="https://placeimg.com/100/100/any" alt="" class="floating3" />
</div>

css

.wrapper {
  height: 700px;
  position: relative;
}

.floating1 {
  position: absolute;
  top: 50px;
  left: 0;
}
.floating2 {
  position: absolute;
  top: 50px;
  left: 150px;
}
.floating3 {
  position: absolute;
  top: 50px;
  left: 300px;
}

javascript

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  // `.toFixed()`를 통해 반환된 문자 데이터를,
  // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}

function floatingObject(selector,delay,size){
  // gsap.to(요소, 시간, 옵션)
  gsap.to(selector, random(1.5,2.5), {
    y: size,
    repeat: -1, // -1 무한반복
    yoyo: true, // 애니메이션 되돌아오기(설정안할 시 끈킴)
    ease: Power1.easeInOut, // 타이밍함수
    delay: random(0,delay) // 지연시간
  })
}
floatingObject('.floating1',1,15)
floatingObject('.floating2',.5,15)
floatingObject('.floating3',1.5,20)