애니메이션에서 중간단계를 사용하도록 하는 메서드
gsap.to() : 애니메이션의 끝나는 속성을 지정
<body>
<div class="box"></div>
<script>
//gsap.to("타겟", {
// 속성값,
// 속성값, //필요한 속성값은 사이트에서 찾아 넣는다.
//}) 어떻게 변하라고 명령을 넣는것.
//gsap.to()는 애니메이션의 끝나는 속성을 지정
gsap.to(".box", {
x: 600, //x는 가로값 y는 세로값 기본적으로 px로 지정된다.
duration:5, //속도
background:"blue",
borderRadius:20,
})
</script>
</body>
끝날때의 값을 지정해서 애니메이션을 넣어주는것이다.
gsap.from() : 애니메이션의 시작지점 속성을 지정
<body>
<div class="box"></div>
<script>
//gsap.from()는 애니메이션의 시작지점에 속성을 지정
gsap.from(".box", {
x: 600, //x는 가로값 y는 세로값 기본적으로 px로 지정된다.
duration:5, //속도
background:"blue",
borderRadius:20,
})
</script>
</body>
gsap.fromTo() : from에서 시작값을 적용하고 to에서 종료값을 설정해 애니메이션의 처음부터 끝까지 진행되는 부분을 적용시긴다.
<body>
<div class="box"></div>
<script>
//*fromTo()메서드는 from()에서 시작값이 적용되고 to()에서 종료값이 적용
gsap.fromTo(".box",
{height:200, opacity:0.3}, //from
{y:200, height:100, duration:3, opacity:1} //to
)
</script>
</body>
gsap.timeline() : 연속적으로 애니메이션 효과를 적용시킨다.
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<script>
//gsap.timeline() - 연속적으로 애니메이션 효과를 적용
gsap.timeline()
.to(".box1", {x:100})
.to(".box2", {x:200, scale:2, duration:1})
.to(".box3", {x:300, rotate:180, duration:3})
</script>
</body>
적용시킨 순서대로 진행이 된다.
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<script>
//gsap.timeline() - 연속적으로 애니메이션 효과를 적용
gsap.timeline()
.to(".box1", {x:100})
.to(".box2", {x:200, scale:2, duration:1}, 0.4)
.to(".box3", {x:300, rotate:180, duration:3},"+=3")//타임라인 종료 후 3초 후에 시작이라는 의미
.to(".box4", {x:100}, "-=3")//타임라인 종료 후 3초 전에 시작
.to(".box5", {x:200}, "<")//이전 트윈 타임라인 시작지점
.to(".box6", {x:300}, ">")//이전 트윈 타임라인 종료지점
</script>
</body>
scrolltrigger()
스크롤 트리거는 자바스크립트에서 scrollY 값을 계산해서 지정해서 실행되는 부분을 설정한것과 같이 트리거를 사용해 객체기준범위를 지정하는것이다.
<body>
<section class="section"></section>
<section class="section gsap">
<div class="box box1"></div>
</section>
<section class="section"></section>
<section class="section"></section>
섹션을 나누고 2번째 섹션에서 애니메이션이 실행되도록 할것이다.
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
.section{
height: 100vh;
background: #222;
padding: 100px;
}
.section:nth-child(2n){
background: #ccc;
}
.box{
width: 100px; height: 100px;
background: orange;
margin: 50px;
}
</style>
해당되는 플러그인을 이어주고 스타일로 해당 섹션의 높이를 100vh로 지정해준다.
<script>
gsap.to(".box1", {
scrollTrigger:{
trigger:".gsap", //객체기준범위
start: "top 30%", //시작지점(트리거가 적용되는 객체의 위치, 브라우저의 기준점)
end: "100% 90%", //끝나는 지점(트리거가 적용되는 객체의 위치, 브라우저의 기준점)
markers: true, //작업하기 편한 기준선을 지정하는것 기본 값은 false이다.
} ,
x:800,
})
</script>
scrollTrigger 속에 애니메이션의 끝나는 속성을 집어넣고 해당하는 객체를 지정해준다.
trigger가 gsap에 기준을 잡고 시작되는 지점과 해당 브라우저의 시작점, 끝나는 지점과 해당 브라우저의 끝나는 지점을 지정한 후 markers를 사용해 해당 내용이 보이도록 설정해주면 첫번째 사진과 같이 나오게 된다.
<script>
gsap.to(".box1", {
scrollTrigger:{
trigger:".gsap", //객체기준범위
start: "top 50%", //시작지점(트리거가 적용되는 객체의 위치, 브라우저의 기준점)
end: "30% 90%", //끝나는 지점(트리거가 적용되는 객체의 위치, 브라우저의 기준점)
markers: true, //작업하기 편한 기준선을 지정하는것 기본 값은 false이다.
scrub : 2,
} ,
x:800,
})
</script>
scrub를 지정하여서 해당 구간에서는 반복적으로 애니메이션이 진행되게 할 수도 있다.
<section class="section"></section>
<section class="section gsap">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</section>
<section class="section"></section>
<section class="section"></section>
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
.section{
height: 100vh;
background: #222;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.section:nth-child(2n){
background: #ccc;
}
.list{
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.list li{
width: calc(100%/4 - 20px);
background: tomato;
min-height: 300px;
text-align: center;
margin-top: 200px;
}
</style>
해당 박스들이 어느 지점에 도달하게 되면 위로 올라오도록 설정할 것이다.
<script>
gsap.timeline({//타임라인은 바깥에 메서드를 입력한다.
scrollTrigger:{
trigger:".list",
start:"top 80%",
end:"100% 100%",
markers:true, //해당 메서드의 시작과 끝은 표시
scrub : 2
}
})
.to(".list li:nth-child(1)", {y:-200, duration:1})
.to(".list li:nth-child(2)", {y:-200, duration:1}, 0.2)
.to(".list li:nth-child(3)", {y:-200, duration:1}, 0.4)
.to(".list li:nth-child(4)", {y:-200, duration:1}, 0.6)
</script>
스크롤 트리거를 사용할것이기 때문에 스크롤트리거를 연결해주고 timeline으로 차례대로 올라올수 있도록 설정한다. 그리고 스크롤 트리거에서 트리거가 실행될 클래스를 지정해주고 시작점과 시작점을 잡아줄 브라우저의 위치 그리고 끝나는 지점과 해당 끝나는 지점의 브라우저 위치를 설정해주고 marker로 해당 영역이 보이도록 설정해준다. 그리고 scrub를 넣어서 해당 영역에서 반복되어서 애니메이션이 실행되도록 해주면
차례대로 올라오게 되고 end 영역을 지나면 애니메이션이 끝나게 된다. 다시 스크롤을 올리면 해당 애니메이션이 반대로 실행되면서 반복시킬 수 있게 된다.
위에서 배운 스크롤트리거를 사용해서 포트폴리오의 비주얼에 역동성을 넣어주도록 하자.
구조
<body>
<div id="wrap">
<header id="header">
<div class="header-in">
<div class="logo"><a href="#">logo</a></div>
<nav>
메뉴
</nav>
</div>
</header>
<div id="visual">
<div class="visual-img">
<img src="./images/01.jpg" alt="01">
</div>
<div class="visual-txt">
<h1 class="title">
<span class="title-paralax">PORTFOLIO</span><!--시간차를 두고 각각 움직이는것을 paralax라고 한다.-->
<span class="stroke">UX/UI WEB</span>
</h1>
</div>
<div class="visual-marq">
<div class="visual-marq-wrap">
<span class="visual-marq-txt">
UX/UI DESIGN
<span class="visual-marq-star">
<img src="./images/star.svg" alt="star">
</span>
</span>
<span class="visual-marq-txt">
UX/UI PLAN
<span class="visual-marq-star">
<img src="./images/star.svg" alt="star">
</span>
</span>
<span class="visual-marq-txt">
WEB PUBLISHER
<span class="visual-marq-star">
<img src="./images/star.svg" alt="star">
</span>
</span>
<span class="visual-marq-txt">
DEVELOPER
<span class="visual-marq-star">
<img src="./images/star.svg" alt="star">
</span>
</span>
</div>
</div>
</div>
<main id="container">
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
</main>
<footer id="footer"></footer>
</div>
https://gsap.com/docs/v3/Eases
'기록 > 수업정리_javascr' 카테고리의 다른 글
| 문서객체생성 (0) | 2024.08.22 |
|---|---|
| mousewheel (0) | 2024.08.21 |
| svg (0) | 2024.08.14 |
| 객체 설명 (0) | 2024.08.12 |
| 내장객체 (날짜정보) (0) | 2024.08.02 |
