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