Post

[GSAP] keyframes

Posted
By songmiok
1 min read
[GSAP] keyframes

keyframes

CSS에서 사용할 수 있는 keyframes를 gsap에서도 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12

gsap.to(".among", {
  keyframes: {
    "0%": {},
    "30%": { x: 420, },
    "50%": { scale: 2, },
    "60%": { x: 0, }, 
    "70%": { scale: 1 },
    "100%": { x: 420, },
    // easeEach: "sine.out",
  },
  duration: 3
})

CSS keyframes의 default ease값은 “power1.inOut” 이고
GSAP keyframes의 default ease값은 “power1.out” 입니다.

easeEach 를 사용하면 각 프레임 구간 마다 가속도를 재설정 할 수 있습니다.

https://codepen.io/GreenSock/pen/GRvLaQe/941b82d684b7fbf5303304d671e15ce2

예제1

예제2

예제3

JavaScript, GSAP
This post is licensed under CC BY 4.0 by the author.