[GSAP] ScrollTrigger 기초문법

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-1. 용어정의 - gsap.to()

[Html]

[Css]

.box{ margin: 20px; width: 100px; height: 100px; }

.box1{ background: orange; }

.box2{ background: greenyellow; }

.box3{ background: tomato; }

[Script]

gsap.registerPlugin(ScrollTrigger);

$(function(){

gsap.to(".box1", { duration: 3, x: 200, opacity: 0.2, ease: 'steps(10)', delay: 2,});

gsap.to(".box2", { duration: 3, x: 200, rotate: 720, scale: 1.3,});

gsap.to(".box3", { duration: 3, x: 200, ease: 'elastic', backgroundColor: 'red', width: 300, fontSize: 60});

})

</script>

3-2. 용어정의 - gsap.from(), fromTo(), set()

[Html]

<div class="box box2">fromTo</div>

[Css]

<style>

.box{ margin: 20px; width: 100px; height: 100px; text-align: center; line-height: 100px; }

.box1{ width: 100px; height: 100px; background: orange; }

.box2{ width: 200px; height: 100px; background: greenyellow; }

.box3{ width: 100px; height: 200px; background : tomato; }

</style>

[Script]

gsap.registerPlugin(ScrollTrigger);

$(function(){

gsap.from(".box1", { duration: 3, x: 200, width: 400, opacity: 0.2, ease: 'steps(10)'});

gsap.fromTo(".box2", { fontSize: 40 }, { duration: 3, x: 300, fontSize: 16 });

gsap.set(".box3", { x: 100, width: 200, backgroundColor: 'skyblue', });

})

</script>

3-3. 용어정의 - gsap.play(), .pause(), resume(), reverse(), restart()

[Html]

</div>

[Css]

<style>

.box{ margin: 20px; width: 100px; height: 100px; text-align: center; line-height: 100px; }

.box1{ width: 100px; height: 100px; background: orange; }

</style>

[Script]

gsap.registerPlugin(ScrollTrigger);

$(function(){

var tween = gsap.to(".box1", { duration: 8, x: 400, width: 400, paused: true, });

document.querySelector("#play").onclick = function() { return tween.play(); }

document.querySelector("#pause").onclick = function() { return tween.pause(); }

document.querySelector("#resume").onclick = function() { return tween.resume(); }

document.querySelector("#reverse").onclick = function() { return tween.reverse(); }

document.querySelector("#restart").onclick = function() { return tween.restart(); }

})

</script>

3-4. 용어정의 - TimeLine

- delay를 사용해서 애니메이션을 순차적으로 실행할 수 있다.

[Html]

[Css]

<style>

.box{ margin: 20px; width: 100px; height: 100px; }

.box1{ background: orange; }

</style>

[Script]

gsap.registerPlugin(ScrollTrigger);

$(function(){

var tl = gsap.timeline();

tl.to(".box1", { duration: 3, x: 200, ease: 'steps(10)' });

tl.to(".box1", {duration: 3, y: 200, opacity: 1, });

tl.to(".box1", { duration: 3, x: 0, width: 200, backgroundColor: 'red', });

tl.to(".box1", { duration: 3, y: 0, height: 200, });

})

</script>

4. [유튜브 강의] To, From, FromTo 적용 법

[Html]

<h2 class="title"><span>GSAP</span>ScrollTrigger</h2>

</section>

<ul>

</ul>

</section>

<h2 class="contitle">section 03</h2>

</section>

</div>

[Css]

<style>

*{padding: 0; margin: 0}

li { list-style: none;}

section { border: 1px solid red; height: 100vh; background-color: #23282a; color: #fff; display: flex; justify-content: center; align-items: center; }

.con01 .title { font-size: 120px; text-transform: uppercase; line-height: 1.1; }

.con01 .title span { -webkit-text-stroke: 2px #b1dd40; color: transparent; display: block;}

.con02 ul { display: flex; width: 75%; text-align: center; color: #23282a; font-weight: bold; justify-content: space-between; }

.con02 ul li { width: 22%; background-color: #fed700; height: 300px; border-radius: 20px; display: flex; justify-content: center; align-items: center;}

.con03 { margin-bottom: 200px; position: relative; overflow: hidden; }

.con03 .contitle {-webkit-text-stroke: 2px #b1dd40; color: transparent; font-size: 120px; }

.con03 span { display: block; width: 250px; height: 350px; background-color: #fee8b0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 20px; display: flex; justify-content: center; align-items: center; color: #333; font-size: 28px; font-weight: bold; }

.con03 span.a { transform: translate(-50%,-50%) rotate(-12deg);}

.con03 span.b { background-color: #ffbbcc; transform: translate(-50%,-50%) rotate(12deg);}

.con03 span.c { background-color: #ffcccc; transform: translate(-50%,-50%) rotate(15deg);}

.con03 span.d { background-color: #df9773; transform: translate(-50%,-50%) rotate(18deg);}

.con03 span.e { background-color: #d9eccb; transform: translate(-50%,-50%) rotate(-3deg);}

</style>

[Script]

gsap.registerPlugin(ScrollTrigger);

$(function(){

// con02

gsap.timeline({

scrollTrigger: {

trigger: ".con02 ul",

start: "top 90%", //콘텐츠 시작위치, 브라우저 시작위치 90%

end: "20% 100%", //콘텐츠 마지막위치 20%, 브라우저 끝위치 100%

scrub: 2, // 되감기, 부드럽게 정도

// markers: true,

})

.to('.con02 li:nth-child(1)', { y: '-400px', duration: 1, ease: 'none'}, 0.2)

.to('.con02 li:nth-child(2)', { y: '-400px', duration: 1, ease: 'none'}, 0.4)

.to('.con02 li:nth-child(3)', { y: '-400px', duration: 1, ease: 'none'}, 0.6)

.to('.con02 li:nth-child(4)', { y: '-400px', duration: 1, ease: 'none'}, 0.8)

// con03

gsap.timeline({

scrollTrigger: {

trigger: ".con03",

start: 'top 100%',

end: "100% 100%",

scrub:2,

markers: true,

}

})

.fromTo('.con03 span.a', { y: '400%'}, { y: '0'}, 1.2)

.fromTo('.con03 span.b', { y: '400%'}, { y: '0'}, 1.4)

.fromTo('.con03 span.c', { y: '400%'}, { y: '0'}, 1.5)

.fromTo('.con03 span.d', { y: '400%'}, { y: '0'}, 1.8)

.fromTo('.con03 span.e', { y: '400%'}, { y: '0'}, 2)

})

</script>

4-1. To, From, FromTo 자세한 설명

to => 후

from => 전

fromTo => 전 -> 후

:) 참고링크

티스토리 참고링크

https://lpla.tistory.com/106

'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 중급(실전1) (0)	2024.03.22

MANGTTU

[GSAP] ScrollTrigger 기초문법

1. 유튜브 링크

[★] 플러그인

2. gsap 정의

3-1. 용어정의 - gsap.to()

[Html]

[Css]

[Script]

3-2. 용어정의 - gsap.from(), fromTo(), set()

[Html]

[Css]

[Script]

3-3. 용어정의 - gsap.play(), .pause(), resume(), reverse(), restart()

[Html]

[Css]

[Script]

3-4. 용어정의 - TimeLine

[Html]

[Css]

[Script]

4. [유튜브 강의] To, From, FromTo 적용 법

[Html]

[Css]

[Script]

4-1. To, From, FromTo 자세한 설명

to => 후

from => 전

fromTo => 전 -> 후

:) 참고링크

'FRONT > GSAP' 카테고리의 다른 글

티스토리툴바

[GSAP] ScrollTrigger 기초문법

1. 유튜브 링크

[★] 플러그인

2. gsap 정의

3-1. 용어정의 - gsap.to()

[Html]

[Css]

[Script]

3-2. 용어정의 - gsap.from(), fromTo(), set()

[Html]

[Css]

[Script]

3-3. 용어정의 - gsap.play(), .pause(), resume(), reverse(), restart()

[Html]

[Css]

[Script]

3-4. 용어정의 - TimeLine

[Html]

[Css]

[Script]

4. [유튜브 강의] To, From, FromTo 적용 법

[Html]

[Css]

[Script]

4-1. To, From, FromTo 자세한 설명

to => 후

from => 전

fromTo => 전 -> 후

:) 참고링크

'FRONT > GSAP' 카테고리의 다른 글

관련글

티스토리툴바