GSAPタイムラインで作る、ボタンバウンスアニメーション

1
<a href="#" class="c-button js-button">すべて見る</a>

1
.c-button {
2
  --color-button-bg: #2f7fb2;
3
  --color-button-text: #fff;
4

5
  display: inline-block;
6
  font-weight: 700;
7
  font-size: 20px;
8
  color: var(--color-button-text);
9
  background-color: var(--color-button-bg);
10
  border-radius: 99rem;
11
  padding: 0.75em 2.5em;
12
}

1
// ボタンのバウンスアニメーション本体
2
const playBounceAnimation = (target, onCompleteCallback) => {
3
  const tl = gsap.timeline({
4
    defaults: { transformOrigin: "center bottom" },
5
    onComplete: onCompleteCallback,
6
  });
7

8
  tl.to(target, {
9
    scaleX: 1.05,
10
    scaleY: 0.95,
11
    yPercent: 0,
12
    duration: 0.12,
13
    ease: "power2.in",
14
  });
15
  tl.to(target, {
16
    scaleX: 0.95,
17
    scaleY: 1.05,
18
    yPercent: -25,
19
    duration: 0.2,
20
    ease: "power2.inOut",
21
  });
22
  tl.to(target, {
23
    scaleX: 1,
24
    scaleY: 1,
25
    yPercent: 0,
26
    duration: 0.2,
27
    ease: "power2.inOut",
28
  });
29
  tl.to(
30
    target,
31
    { scaleX: 1.15, scaleY: 0.85, duration: 0.05, ease: "power2.out" },
32
    "-=0.05",
33
  );
34
  tl.to(target, {
35
    scaleX: 1,
36
    scaleY: 1,
37
    duration: 0.4,
38
    ease: "elastic.out(1.2, 0.4)",
39
  });
40
};
41

42
// ボタンのアニメーションを初期化
43
const initButtonAnimations = () => {
44
  const buttons = document.querySelectorAll(".js-button");
45

46
  buttons.forEach((button) => {
47
    if (!button) return;
48
    let isAnimating = false;
49

50
    button.addEventListener("mouseenter", () => {
51
      if (isAnimating) return;
52
      isAnimating = true;
53
      playBounceAnimation(button, () => {
54
        isAnimating = false;
55
      });
56
    });
57
  });
58
};
59

60
initButtonAnimations();