์น ์ ๋๋ฉ์ด์ ์ ์ํ GSAP ๊ฐ์ด๋ Part.01
GSAP์ ํตํด ์ธํฐ๋ํฐ๋ธ ์น ๊ฐ๋ฐ์ ํ ๋จ๊ณ ๋ค๊ฐ๊ฐ ์ ์์ผ๋ฉฐ, ์ ๋๋ฉ์ด์ ์ ๋ณด๋ ๊ด์ ์ด ๋ฌ๋ผ์ง ๊ฒ๋๋ค.
์๊ฐ์ 660๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

์๋ ํ์ธ์ ์๊ฐ์ ์ฌ๋ฌ๋ถ :)
๐ ๋๋์ด ํํธ3 ScrollTrigger ๊ฐ์๊ฐ ์คํํ์ต๋๋ค ๐ํํธ3 ๊ฐ์์์๋ ์คํฌ๋กค ์ ๋๋ฉ์ด์ ์ ๋ํ ๋ง์ ๋ด์ฉ๋ค์ GSAP์ผ๋ก ์ปจํธ๋กคํ๋ ๋ฐฉ๋ฒ์ ๋ํ ๋ด์ฉ์ ๋ค๋ฃน๋๋ค.
ScrollTrigger ์ฌ์ฉ๋ฒ
scroll animation ์ปจํธ๋กค ๋ฐฉ๋ฒ
gsap plugin + scrollTrigger
๋ถ๋๋ฌ์ด ์คํฌ๋กค๋ง(smooth scroll)๊ณผ ScrollTrigger์ ์ฐ๋
SPA (single page application) ๋ฅผ ์ฌ์ฉํ ๋ถ๋๋ฌ์ด ํ๋ฉด ์ ํ (barba.js)
๋ฐ์ํ ์คํฌ๋กค ์ ๋๋ฉ์ด์ ์ปจํธ๋กค
๋์์ค์ด๊ธฐ(์ ๊ทผ์ฑ) ๋ฅผ ์ฌ์ฉํ ์คํฌ๋กค ์ ๋๋ฉ์ด์ ์ฌ์ฉ์ ์ ์ด
๋ง์ ๋ด์ฉ๋ค์ ๋ด๋ค๋ณด๋ ๋ฌด๋ ค 13์๊ฐ 38๋ถ ์ง๋ฆฌ ๊ฐ์๊ฐ ๋์ด์ ๐ฅน
์ด๋ฒ ํํธ3 ๊ฐ์๋ ๊ฐ์ ์คํ ํ ์ธ(30%) ์ผ์ฃผ์ผ๋ง ์งํ๋๋์ ์ฐธ๊ณ ํด์ฃผ์ธ์
(์ด๋ชจํฐ์ฝ์ ํ๋ก ํธ์๋ ๋ถํธ์บ ํ 6๊ธฐ ์กธ์
์ ๊น๋ค์ฐ๋๊ป์ ๋ง๋ค์ด์ฃผ์
จ์ต๋๋ค โบ๏ธ)ํํธ3 ๊ฐ์ ๋ง๊ด๋ถ ๐






