GSAP - javascript 도형 이동 구현

GSAP with CDN 검색

head 스크립트에 추가



index

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
  <script type="module" src="js/main.js"></script>
</head>
<body>
  <button class="btnMove">move</button>
  <button class="btnReset">reset</button>
  <div id="wrap">
    <div class="box"></div>
  </div>
</body>
</html>


main.js

const wrap = document.querySelector('#wrap');
const btnMove = document.querySelector('.btnMove');
const btnReset = document.querySelector('.btnReset');

btnMove.addEventListener('click', ()=>{
  gsap.to('.box', {x: 300, y: 200, rotation: 360, duration: 1, backgroundColor: 'pink'});
})

btnReset.addEventListener('click', ()=>{
  gsap.to('.box', {x: 0, y: 0, rotation: 0, backgroundColor: 'aqua'});
})


style.css

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

#wrap {
  width: 1000px;
  height: 700px;
  border: 1px solid gray;
  margin: 100px auto;
}
#wrap .box {
  width: 100px;
  height: 100px;
  background: aqua;
}


스크롤을 이용한 텍스트(도형) 이동

index

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <script defer src="scroll.js"></script>
</head>

<body>
  <section id="frame1"></section>
  <section id="frame2">
    <h1>FRAME2</h1>
  </section>
  <section id="frame3"></section>
  <section id="frame4"></section>
</body>

</html>


scss

@use "reset";

section {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;

  &#frame1 {
    background: lightgreen;
  }
  &#frame2 {
    background: orange;
    display: flex;
    align-items: center;
    justify-content: center;

    h1 {
      font-size: 8vw;
    }
  }
  &#frame3 {
    background: cyan;
  }
  &#frame4 {
    background: pink;
  }
}


js

gsap.from("#frame2 h1", {
  x: 1000,
  opacity: 0,
  rotation: 180,
  duration: 2,
  color: "red",

  scrollTrigger: {
    trigger: "#frame2 h1",
    markers: true,
    start: "top 100%",
    end: "top 0%",
    toggleActions: "restart pause reverse reset",
  },
});

//toggleActions의 순서별 액션: 영역진입, 영역떠남, 영역재진입, 영역재떠남

/*
  play: 모션 시작
  pause: 모션 일시 정지
  resume : 모션 이어서 실행
  restart : 모션 처음부터 다시 시작
  complete : 무조건 마지막 위치로 모션 강제 종료
  reverse: 다시 역으로 모션 재생
  none: 모션 기능 해제
*/










댓글 쓰기

다음 이전