https://nikkankeiba.co.jp/wp-content/themes/nikkankeiba-theme/js/gsap/newspaper.js

1export function enableNewspaperAnimation() {
2  enableBorderAnimation()
3  enableNewspaperChuo()
4  enableNewspaperNankan()
5  enableHighlight()
6}
7
8function enableBorderAnimation() {
9  const borders = gsap.utils.toArray(".animate-newspaper-border")
10
11  borders.forEach((border) => {
12    gsap.fromTo(
13      border,
14      {
15        scaleX: 0,
16        transformOrigin: "left",
17        visibility: "hidden"
18      },
19      {
20        scaleX: 1,
21        duration: 1.5,
22        visibility: "visible",
23        scrollTrigger: {
24          trigger: border,
25          start: "top+=50 bottom",
26          markers: false,
27        },
28      }
29    )
30  })
31}
32
33function enableNewspaperChuo() {
34  const content = gsap.utils.toArray(".animate-newspaper-chuo")
35  gsap.fromTo(
36    content,
37    {
38      opacity: 0,
39      y: '20px'
40    },
41    {
42      opacity: 1,
43      y: '0px',
44      duration: 1.2,
45      stagger: 0.3,
46      scrollTrigger: {
47        trigger: content,
48        start: "top+=50 bottom",
49        markers: false,
50      },
51    }
52  );
53}
54
55
56function enableNewspaperNankan() {
57  const content = gsap.utils.toArray(".animate-newspaper-nankan")
58  gsap.fromTo(
59    content,
60    {
61      opacity: 0,
62      y: '20px'
63    },
64    {
65      opacity: 1,
66      y: '0px',
67      duration: 1.2,
68      stagger: 0.3,
69      scrollTrigger: {
70        trigger: content,
71        start: "top+=50 bottom",
72        markers: false,
73      },
74    }
75  );
76}
77
78function enableHighlight() {
79  const highlight = gsap.utils.toArray(".animate-highlight-newspaper")
80
81  highlight.map((highlight) => {
82    gsap.fromTo(
83      highlight,
84      {
85        scaleX: 0,
86        transformOrigin: "left"
87      },
88      {
89        scaleX: 1,
90        duration: 1,
91        ease: "power2.out",
92        scrollTrigger: {
93          trigger: highlight,
94          start: "top+=50 bottom",
95          markers: false,
96        },
97      }
98    )
99  })
100}