Animation
Animation
GSAP
GreenSock์์ ๋ง๋ Animation Platform
์ ๋๋ฉ์ด์ ์ JS๋ก ์ฝ๊ฒ ๊ตฌํํ ์ ์๊ฒ ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Method
.to(targets, options})
: ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ ํ๊ฒ์ ์ง์ ํ์ฌ ์ ๋๋ฉ์ด์ ์ ์ค์ .timeline()
ScrollTrigger
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.to(target, {
scrollTrigger: {
trigger: Trigger DOM Target,
// ํธ๋ฆฌ๊ฑฐ๋ก ์ง์ ํ top ๋ถ๋ถ์ด ๋ทฐํฌํธ bottom ์์ญ์ ๋๋ฌํ ์๊ฐ ์ ๋๋ฉ์ด์
์ ์์
start: 'top bottom',
end: 'bottom bottom',
markers: true,
scrub: true,
}
})
trigger: trigger ์ง์ ์์๊ฐ viewport ์์ ๋ค์ด์ค๋ ์๊ฐ ์์ ์ง์ ํ ์ ๋๋ฉ์ด์ ์ด ํธ๋ฆฌ๊ฑฐ๋๋ผ
start: scroll trigger๊ฐ ์์๋๋ ์์ ์ ์ค์ (default => 'top bottom')
end: ์ ๋๋ฉ์ด์ ์ด ๋๋๋ ์์ ์ ์ค์
markers: ์ด๋ฒคํธ๊ฐ ์์๋๋ ์์ ์ ์๊ฐ์ ์ผ๋ก ํ์ธ ๊ฐ๋ฅ
scrub: ํ๋ฉด์ ์คํฌ๋กคํ๋ ์๊ฐ ๋ฐ๋ก ์ ์ฉ๋๋ ๊ฒ์ด ์๋ ์คํฌ๋กคํ ์ ๋์ ๋ฐ๋ผ ๋ณํ๋๋ค.
pin: ๋์์ ํ๋ฉด์ ๊ณ ์ ์ํจ๋ค.
Last updated