https://persol-serverworks.co.jp/assets/js/home-animation.js?v=20250313

1
2 document.addEventListener("DOMContentLoaded", (event) => {
3  gsap.registerPlugin(ScrollTrigger)
4 });
5
6let mvWaveLineElement = document.querySelector(".homePage .mv .waveLine")
7
8// mvWaveLineElement.addEventListener("animationend", (ev) => {
9//   ev.target.classList.add('animation-end')
10// });
11
12ScrollTrigger.create({
13  trigger: mvWaveLineElement,
14  start: "top bottom",
15  onEnter: ({progress, direction, isActive}) => {
16    // if(!mvWaveLineElement.classList.contains("animation-end")){
17      mvWaveLineElement.classList.add("animate")
18    // }
19  },
20  onLeave: ({progress, direction, isActive}) => {
21    if(mvWaveLineElement.classList.contains("animate")){
22      mvWaveLineElement.classList.add("animation-end-view")
23    }
24  },
25  onLeaveBack: ({progress, direction, isActive}) => {
26
27  }
28});
29
30/*
31
32GROW WITH THE CLOUD
33
34*/
35
36// "GROW"が左から表示
37gsap.fromTo('.homePage .gwtc > header h2 .grow',{
38  'clip-path':'polygon(0% 0%, 0% 0%, 0% 100%, 0% 1000%)', 
39},{
40  'clip-path':'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
41  duration: 0.5,
42  ease: "power3.out",
43  scrollTrigger: {
44    toggleActions: "play none none none",
45    trigger: '.homePage .gwtc',
46    start: "top bottom",
47    end: "top top",
48    onEnter: ({progress, direction, isActive}) => {
49      const elm = document.querySelector('.homePage .gwtc > header h2 .grow')
50      elm.classList.add("animate")
51    },
52  },
53});
54
55// "WITH"が左から表示
56gsap.fromTo('.homePage .gwtc > header h2 .with',{
57  'clip-path':'polygon(0% 0%, 0% 0%, 0% 100%, 0% 1000%)', 
58},{
59  'clip-path':'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
60  duration: 0.3,
61  delay:0.2,
62  scrollTrigger: {
63    toggleActions: "play none none none",
64    trigger: '.homePage .gwtc',
65    start: "top bottom",
66    end: "top top",
67  },
68});
69
70// "THE CLOUD"が左から表示
71gsap.fromTo('.homePage .gwtc > header h2 .the_cloud',{
72  'clip-path':'polygon(0% 0%, 0% 0%, 0% 100%, 0% 1000%)', 
73},{
74  'clip-path':'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
75  duration: 0.5,
76  delay:0.4,
77  scrollTrigger: {
78    toggleActions: "play none none none",
79    trigger: '.homePage .gwtc',
80    start: "top bottom",
81    end: "top top",
82  },
83});
84
85// 右の丸とロゴ：全体フェードイン
86gsap.fromTo('.homePage .gwtc > header .circles',{
87  opacity: 0,
88},{
89  opacity: 1,
90  duration: 1,
91  delay:0.7,
92  scrollTrigger: {
93    toggleActions: "play none none none",
94    trigger: '.homePage .gwtc',
95    start: "top bottom",
96    end: "top top",
97  },
98});
99gsap.fromTo('.homePage .gwtc > header .circles .grayCircle',{
100  x: '50%',
101
102},{
103  x: '0',
104  
105  duration: 1,
106  delay: 0.7,
107  ease: "power2.out",
108  scrollTrigger: {
109    toggleActions: "play none none none",
110    trigger: '.homePage .gwtc',
111    start: "top bottom",
112    end: "top top",
113  },
114});
115
116// 右の丸とロゴ：赤い丸
117gsap.fromTo('.homePage .gwtc > header .circles .redCircle',{
118  x: '-50%',
119},{
120  x: '0',
121  duration: 1,
122  delay: 0.7,
123  ease: "power2.out",
124  scrollTrigger: {
125    toggleActions: "play none none none",
126    trigger: '.homePage .gwtc',
127    start: "top bottom",
128    end: "top top",
129  },
130});
131
132// 右の丸とロゴ：白い丸（左）
133gsap.fromTo('.homePage .gwtc > header .circles .leftCircle',{
134  x: '70%',
135},{
136  x: '0',
137  duration: 1.2,
138  delay: 0.7,
139  ease: "power2.out",
140  scrollTrigger: {
141    toggleActions: "play none none none",
142    trigger: '.homePage .gwtc',
143    start: "top bottom",
144    end: "top top",
145    // scrub: true
146  },
147});
148
149// 右の丸とロゴ：白い丸（右）
150gsap.fromTo('.homePage .gwtc > header .circles .rightCircle',{
151  x: '-70%',
152},{
153  x: '0',
154  duration: 1.2,
155  delay: 0.7,
156  ease: "power2.out",
157  scrollTrigger: {
158    toggleActions: "play none none none",
159    trigger: '.homePage .gwtc',
160    start: "top bottom",
161    end: "top top",
162  },
163});
164
165// 右の丸とロゴ：ロゴ
166gsap.fromTo('.homePage .gwtc > header .circles .logos',{
167  opacity:0
168},{
169  opacity:1,
170  duration: 1.2,
171  delay: 1.2,
172  ease: "none",
173  scrollTrigger: {
174    toggleActions: "play none none none",
175    trigger: '.homePage .gwtc > header .circles .logos',
176    start: "top bottom",
177    end: "top top",
178  },
179});
180
181document.querySelectorAll(".homePage .longTextBox p .g").forEach((elm) => {
182  ScrollTrigger.create({
183    trigger: elm,
184    start: "top bottom",
185    onEnter: ({progress, direction, isActive}) => {
186      elm.classList.add("animate");
187    }
188  });
189})
190
191let gwtcWaveLineElement = document.querySelector(".homePage .gwtc .waveLine")
192ScrollTrigger.create({
193  trigger: gwtcWaveLineElement,
194  start: "top bottom",
195  onEnter: ({progress, direction, isActive}) => {
196    gwtcWaveLineElement.classList.add("animate")
197  },
198});
199
200ScrollTrigger.create({
201  trigger: '.homePage .engineersBlog .engineersBlogSlide .swiper-slide img',
202  start: "top bottom",
203  onEnter: ({progress, direction, isActive}) => {
204    const elms = document.querySelectorAll(".homePage .engineersBlog .engineersBlogSlide .swiper-slide img");

205    elms.forEach((elm) => {
206      elm.classList.add("appear")
207    });
208
209  },
210});
211
212let newsWaveLineElement = document.querySelector(".homePage .news .waveLine")
213ScrollTrigger.create({
214  trigger: newsWaveLineElement,
215  start: "top bottom",
216  onEnter: ({progress, direction, isActive}) => {
217    newsWaveLineElement.classList.add("animate")
218  },
219});
220
221gsap.fromTo('.homePage .gwtc > header .bg',{
222  opacity: 0
223},{
224  opacity: 1,
225  duration: 2,
226  delay: 1,
227  ease: "power2.out",
228  scrollTrigger: {
229    toggleActions: "play none none none",
230    trigger: '.homePage .gwtc > header .bg',
231    start: "top bottom",
232    end: "top top",
233    // scrub: true
234  },
235});
236
237ScrollTrigger.create({
238  trigger: '.homePage .recruit .entext',
239  start: "top bottom",
240  onEnter: ({progress, direction, isActive}) => {
241    document.querySelector(".homePage .recruit .entext").classList.add("animate");
242  }
243});
244
245document.querySelectorAll(".ctaBox .ctaSec").forEach((sec) => {
246  const elm = sec.querySelector('header .en');
247  ScrollTrigger.create({
248    trigger: elm,
249    start: "top bottom",
250    onEnter: ({progress, direction, isActive}) => {
251      elm.classList.add("animate");
252    }
253  });
254})
255
256ScrollTrigger.create({
257  trigger: '.homePage .recruit',
258  start: "center center",
259  onEnter: ({progress, direction, isActive}) => {
260    document.querySelector(".homePage .recruit").classList.add("showbg")
261  },
262});
263
264document.querySelectorAll('.js-palla-items').forEach((wrapper) => {
265  
266  gsap.fromTo(wrapper.querySelectorAll('.js-palla-item'),{
267    opacity: 0,
268    y:'3px'
269  },
270  {
271    y: 0,
272    opacity: 1,
273    duration: 1,
274    delay:0.3,
275    ease: "power.out",
276    scrollTrigger: {
277      toggleActions: "play none none none",
278      trigger: wrapper,
279      start: "top 65%",
280    },
281    stagger: {
282      each: .1,
283    }
284  })
285})
286
287document.querySelectorAll('.js-palla-items').forEach((wrapper) => {
288  
289  gsap.fromTo(wrapper.querySelectorAll('.js-palla-slideInItem'),{
290    'clip-path':'polygon(0% 0%, 0% 0%, 0% 100%, 0% 1000%)', 
291  },
292  {
293    'clip-path':'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
294    duration: 0.5,
295    ease: "power1.out",
296    scrollTrigger: {
297      toggleActions: "play none none none",
298      trigger: wrapper,
299      start: "top 65%",
300    },
301    stagger: {
302      each: .1,
303    }
304  })
305})