HAEDDA

1. Scrubscrub이라는 이름 그대로 스크롤을 문지를때=스크롤움직일때 애니메이션이 동작하는 개념으로 이해  See the Pen GSAP - scrollTrigger Scrub by seuliing (@seuliing) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   2. Pin스크롤시에도 요소가 pin을 꽂은 것처럼 고정되는 효과    See the Pen GSAP - scrollTrigger Pin by seuliing (@seuliing) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

Interactive Web/GSAP 2024. 6. 28. 00:11

scrollTrigger란GSAP의 플러그인 중 하나로, 스크롤 이벤트를 사용하여 애니메이션 효과를 제어할 수 있도록 하는 도구  1. 사용법GSAP 홈페이지에서 cdn, npm 등의 방식으로 사용할 수 있으며,gsap과 scrollTrigger 모두 가져와야한다.   2. 기본 문법2-1. tween 방식 See the Pen Untitled by seuliing (@seuliing) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  2-2. 생성자 방식 See the Pen GSAP scrollTrigger (2) by seuliing (@seuliing) on CodePen." data-ke-type="html">HTML 삽입미리보기할 ..

Interactive Web/GSAP 2024. 6. 27. 23:01

1. Timeline을 사용하는 이유1-1. timeline을 사용하지 않았을 때gsap.from('.box1', {duration:1, opacity:0, y:100})gsap.from('.box2', {duration:1, opacity:0, y:100, delay:1})gsap.from('.box3', {duration:1, opacity:0, y:100, delay:2})gsap.from('.box4', {duration:1, opacity:0, y:100, delay:3}) 이렇게 delay를 하나하나 계산해서 걸어줘야하는 번거로움이 있음.순서 변경할 때마다 각각의 delay를 재설정 해줘야 함.  1-2. timeline을 사용할 경우const timeline = gsap.timeline()t..

Interactive Web/GSAP 2024. 6. 26. 22:28

1. GSAP이란?GSAP(GreenSock Animation Platform)에서 제공하는 javascript 애니메이션 라이브러리.이곳에서 GSAP을 활용한 https://gsap.com/showcase/page/4/  2. GSAP 기본 사용법https://gsap.com/ Homepage | GSAPGSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.gsap.comgsap 홈페이지에서 npm, cdn 등의 방법으로 사용할 수 있다.  3. GSAP 기본 문법1. gsap.to(..

Interactive Web/GSAP 2024. 6. 17. 22:55