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: 모션 기능 해제
*/
Tags:
웹개발_Tool