1. 유튜브 링크
유튜브 무료강의
https://www.youtube.com/watch?v=xn6rwG-DinA&t=3s
[★] 플러그인
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2. gsap 정의
gsap.timeline => 시간에 배치하는 트윈용 컨테이너로 타임라인 재생 헤드가 이동함에 따라 하위 트윈을 스크럽하고 그에 따라 렌더링
gsap.to(".circle", { x: 40, fill: 'blue' }); => 현재 상태에서 정의된 값으로 애니메이션 적용
gsap.from(".circle", { x: -40, fill: 'blue' }); =>정의된 값에서 애니메이션을 시작해서 현재상태에 끝나는 역방향
gsap.fromTo(".circle", { x: -40, fill: 'blue' }, { x: 40, fill: 'green' }) => 시작과 종료값 모두 정리
gsap은 특정 요소 scrollTrigger에서 정한 영역에서 애니메이션을 연결하여 해당 요소가 뷰포트에 있을 때만 재생
성능이 향상되고 화려한 애니메이션을 볼수 있음.
3. To, From, FromTo 적용 법
[Html]
더보기
<div class="wrap">
<section class="con01">
<h2><span>GSAP</span>SCROLLTRIGGER</h2>
</section>
<section class="con02">
<span class="circle"></span>
<div class="textBox">
<p>
our releases<br>
get a feeling<br>
for the latest<br>
selected sound
</p>
</div>
</section>
<section class="con03">
<h2>ScrollTrigger</h2>
</section>
</div>
[Css]
더보기
<style>
*{margin: 0; padding: 0;}
section{ height: 100vh; display: flex; justify-content: center; align-items: center; border-radius:2px solid red; }
h2 {font-size: 140px; text-transform: uppercase; color: #000; line-height: 1; }
.con01 h2 span { display: block; -webkit-text-stroke: 2px #f45b49; color: transparent; }
.con02 { overflow: hidden; position: relative; height: 1200px; }
.con02 .circle { display: block; width: 2500px; height: 2500px; border-radius: 50%; background-color: #000; position: absolute; top: 40%; left: 50%; transform: translateX(-50%);}
.con02 .textBox { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); color: #fff; text-transform: uppercase; text-align: center; }
.con02 .textBox p { font-size: 64px; font-weight: bold; letter-spacing: -5px; line-height: 1; }
.con03 { background-color: #000; }
.con03 h2 { color: #888; }
</style>
[Script]
더보기
<script>
gsap.registerPlugin(ScrollTrigger);
$(function(){
// circle
gsap.timeline({
scrollTrigger: {
trigger: '.con02',
start: '0% 50%',
end: '30% 0%',
scrub: 1,
markers: true
}
})
.fromTo('.circle',
{ 'width': '0', 'height': '0', 'duration': '10', 'ease': 'elastic', 'top': '3%'},
{ 'width': '2500px', 'height': '2500px', 'duration': '10', 'top': '30%'}, 0)
//duraction: 진행정도
// ease: 'elastic' 가속도
//delay: 0 딜레이
// textbox
gsap.timeline({
scrollTrigger: {
trigger: '.con02 .textBox',
start: '0% 80%',
end: '100% 80%',
scrub: 1,
markers: true
}
})
.fromTo('.textBox',
{ 'top': '50%', 'duration': '5', 'ease': 'elastic', 'opacity': '0'},
{ 'opacity': '1', 'top': '40%'},0)
})
</script>
:) 참고링크
티스토리 참고링크
'FRONT > GSAP' 카테고리의 다른 글
[GSAP] ScrollSmooth 효과 (0) | 2024.03.23 |
---|---|
[GSAP] TextPlugin 타이핑 효과 (0) | 2024.03.23 |
[GSAP] ScrollTrigger 숫자 카운팅 (0) | 2024.03.23 |
[GSAP] ScrollTrigger 중급(실전2) (1) | 2024.03.23 |
[GSAP] ScrollTrigger 기초문법 (0) | 2024.03.22 |