GSAP

1.gsap scrollTrigger 공부

post-thumbnail

https://mill-study.tistory.com/390

2025년 2월 5일

2.gsap snap 기능 이해하기

post-thumbnail

https://www.youtube.com/watch?v=bP7iGE3YKOU&list=PL4UVBBIc6giL8-6jvrClimg0cFL-Muqiq&index=4https://webstoryboy.co.kr/1911이 예제에서 3번 snap에 대한

2025년 2월 5일

3.gsap에서 will-change와 x, y값, transform, top,left 값 - gsap 최적화(3)

post-thumbnail

브라우저가 미리 최적화할 수 있도록 도와줌.하지만 모든 요소에 적용하면 성능 저하 가능 → 애니메이션이 자주 발생하는 요소에만 적용.GSAP에서는 x, y를 사용하면 성능에 문제 없음,transform: translate()를 활용하므로 레이아웃 변화를 최소화함하지만

2025년 2월 27일

4.gsap.killTweensOf 와 scrollTrigger.요소.kill()이 필요한 이유, 그리고 context와 revert와의 연계 - gsap 최적화(2)

post-thumbnail

gsap.context()를 사용하면 해당 컨텍스트에서 실행된 모든 애니메이션을 추적할 수 있다.즉, ctx.revert()를 호출하면, 그 컨텍스트에서 실행된 애니메이션만 제거할 수 있다.하지만, ctx.revert()만으로는 부족한 경우가 있음ctx.revert()

2025년 2월 27일

5.gsap.context(() => {}) 와 return () => {}.revert 해야하는 이유 - gsap 최적화(1)

post-thumbnail

컨텍스트 내에서 실행된 모든 GSAP 애니메이션을 추적ctx.revert()를 실행하면 모든 애니메이션을 한 번에 제거 가능반복적으로 실행될 때 중복 애니메이션을 방지SPA(React, Vue)처럼 페이지가 변경될 때 안전하게 제거 가능1️⃣ ctx.revert()로

2025년 2월 27일