https://cdn.hanaplatform.com/js/error-handling.js

1
2var device_width = window.screen.width;
3
4let text_animation = gsap.utils.toArray(".has_text_move_anim");
5
6if (text_animation) {
7    text_animation.forEach(splitTextLine => {
8        var delay_value = 0.1
9        if (splitTextLine.getAttribute("data-delay")) {
10            delay_value = splitTextLine.getAttribute("data-delay");
11        }
12        const tl = gsap.timeline({
13            scrollTrigger: {
14                trigger: splitTextLine,
15                start: 'top 85%',
16                duration: 1,
17                scrub: false,
18                markers: false,
19                toggleActions: 'play none none none'
20            }
21        });
22
23        const itemSplitted = new SplitText(splitTextLine, {
24            type: "lines"
25        });
26        gsap.set(splitTextLine, {
27            perspective: 400
28        });
29        itemSplitted.split({
30            type: "lines"
31        })
32        tl.from(itemSplitted.lines, {
33            duration: 1,
34            delay: delay_value,
35            opacity: 0,
36            rotationX: -80,
37            force3D: true,
38            transformOrigin: "top center -50",
39            stagger: 0.1
40        });
41    });
42}
43
44// Full Character Setup 
45var animation_char_come_items = document.querySelectorAll(".has_char_anim")
46animation_char_come_items.forEach((item) => {
47
48    var stagger_value = 0.05
49    var translateX_value = 20
50    var translateY_value = false
51    var onscroll_value = 1
52    var data_delay = 0.1
53    var data_duration = 1
54    var ease_value = "power2.out"
55
56    if (item.getAttribute("data-stagger")) {
57        stagger_value = item.getAttribute("data-stagger");
58    }
59    if (item.getAttribute("data-translateX")) {
60        translateX_value = item.getAttribute("data-translateX");
61    }
62    if (item.getAttribute("data-translateY")) {
63        translateY_value = item.getAttribute("data-translateY");
64    }
65    if (item.getAttribute("data-on-scroll")) {
66        onscroll_value = item.getAttribute("data-on-scroll");
67    }
68    if (item.getAttribute("data-delay")) {
69        data_delay = item.getAttribute("data-delay");
70    }
71    if (item.getAttribute("data-ease")) {
72        ease_value = item.getAttribute("data-ease");
73    }
74    if (item.getAttribute("data-duration")) {
75        data_duration = item.getAttribute("data-duration");
76    }
77
78    if (onscroll_value == 1) {
79        if (translateX_value > 0 && !translateY_value) {
80            let split_char = new SplitText(item, {
81                type: "chars, words"
82            });
83            gsap.from(split_char.chars, {
84                duration: data_duration,
85                delay: data_delay,
86                x: translateX_value,
87                autoAlpha: 0,
88                stagger: stagger_value,
89                ease: ease_value,
90                scrollTrigger: {
91                    trigger: item,
92                    start: 'top 85%',
93                }
94            });
95        }
96        if (translateY_value > 0 && !translateX_value) {
97            let split_char = new SplitText(item, {
98                type: "chars, words"
99            });
100            gsap.from(split_char.chars, {
101                duration: data_duration,
102                delay: data_delay,
103                y: translateY_value,
104                autoAlpha: 0,
105                ease: ease_value,
106                stagger: stagger_value,
107                scrollTrigger: {
108                    trigger: item,
109                    start: 'top 85%',
110                }
111            });
112        }
113        if (translateX_value && translateY_value) {
114            let split_char = new SplitText(item, {
115                type: "chars, words"
116            });
117            gsap.from(split_char.chars, {
118                duration: 2,
119                delay: data_delay,
120                y: translateY_value,
121                x: translateX_value,
122                autoAlpha: 0,
123                ease: ease_value,
124                stagger: stagger_value,
125                scrollTrigger: {
126                    trigger: item,
127                    start: 'top 85%',
128                }
129            });
130        }
131        if (!translateX_value && !translateY_value) {
132            let split_char = new SplitText(item, {
133                type: "chars, words"
134            });
135            gsap.from(split_char.chars, {
136                duration: 1,
137                delay: data_delay,
138                x: 50,
139                autoAlpha: 0,
140                stagger: stagger_value,
141                ease: ease_value,
142                scrollTrigger: {
143                    trigger: item,
144                    start: 'top 85%',
145                }
146            });
147        }
148    } else {
149        if (translateX_value > 0 && !translateY_value) {
150            let split_char = new SplitText(item, {
151                type: "chars, words"
152            });
153            gsap.from(split_char.chars, {
154                duration: 1,
155                delay: data_delay,
156                x: translateX_value,
157                ease: ease_value,
158                autoAlpha: 0,
159                stagger: stagger_value
160            });
161        }
162        if (translateY_value > 0 && !translateX_value) {
163            let split_char = new SplitText(item, {
164                type: "chars, words"
165            });
166            gsap.from(split_char.chars, {
167                duration: 1,
168                delay: data_delay,
169                y: translateY_value,
170                autoAlpha: 0,
171                ease: ease_value,
172                stagger: stagger_value
173            });
174        }
175        if (translateX_value && translateY_value) {
176            let split_char = new SplitText(item, {
177                type: "chars, words"
178            });
179            gsap.from(split_char.chars, {
180                duration: 1,
181                delay: data_delay,
182                y: translateY_value,
183                x: translateX_value,
184                ease: ease_value,
185                autoAlpha: 0,
186                stagger: stagger_value
187            });
188        }
189        if (!translateX_value && !translateY_value) {
190            let split_char = new SplitText(item, {
191                type: "chars, words"
192            });
193            gsap.from(split_char.chars, {
194                duration: 1,
195                delay: data_delay,
196                ease: ease_value,
197                x: 50,
198                autoAlpha: 0,
199                stagger: stagger_value
200            });
201        }
202    }
203
204});
205
206// Animation Word
207let animation_word_anim_items = document.querySelectorAll(".has_word_anim");
208

209animation_word_anim_items.forEach((word_anim_item) => {
210
211    var stagger_value = 0.04
212    var translateX_value = false
213    var translateY_value = false
214    var onscroll_value = 1
215    var data_delay = 0.1
216    var data_duration = 0.75
217
218    if (word_anim_item.getAttribute("data-stagger")) {
219        stagger_value = word_anim_item.getAttribute("data-stagger");
220    }
221    if (word_anim_item.getAttribute("data-translateX")) {
222        translateX_value = word_anim_item.getAttribute("data-translateX");
223    }
224
225    if (word_anim_item.getAttribute("data-translateY")) {
226        translateY_value = word_anim_item.getAttribute("data-translateY");
227    }
228
229    if (word_anim_item.getAttribute("data-on-scroll")) {
230        onscroll_value = word_anim_item.getAttribute("data-on-scroll");
231    }
232    if (word_anim_item.getAttribute("data-delay")) {
233        data_delay = word_anim_item.getAttribute("data-delay");
234    }
235    if (word_anim_item.getAttribute("data-duration")) {
236        data_duration = word_anim_item.getAttribute("data-duration");
237    }
238
239    if (onscroll_value == 1) {
240        if (translateX_value && !translateY_value) {
241            let split_word = new SplitText(word_anim_item, {
242                type: "chars, words"
243            })
244            gsap.from(split_word.words, {
245                duration: data_duration,
246                x: translateX_value,
247                autoAlpha: 0,
248                stagger: stagger_value,
249                delay: data_delay,
250                scrollTrigger: {
251                    trigger: word_anim_item,
252                    start: 'top 90%'
253                }
254            });
255        }
256
257        if (translateY_value && !translateX_value) {
258            let split_word = new SplitText(word_anim_item, {
259                type: "chars, words"
260            })
261            gsap.from(split_word.words, {
262                duration: 1,
263                delay: data_delay,
264                y: translateY_value,
265                autoAlpha: 0,
266                stagger: stagger_value,
267                scrollTrigger: {
268                    trigger: word_anim_item,
269                    start: 'top 90%'
270                }
271            });
272        }
273
274        if (translateY_value && translateX_value) {
275            let split_word = new SplitText(word_anim_item, {
276                type: "chars, words"
277            })
278            gsap.from(split_word.words, {
279                duration: 1,
280                delay: data_delay,
281                x: translateX_value,
282                y: translateY_value,
283                autoAlpha: 0,
284                stagger: stagger_value,
285                scrollTrigger: {
286                    trigger: word_anim_item,
287                    start: 'top 90%'
288                }
289            });
290        }
291
292        if (!translateX_value && !translateY_value) {
293            let split_word = new SplitText(word_anim_item, {
294                type: "chars, words"
295            })
296            gsap.from(split_word.words, {
297                duration: 1,
298                delay: data_delay,
299                x: 20,
300                autoAlpha: 0,
301                stagger: stagger_value,
302                scrollTrigger: {
303                    trigger: word_anim_item,
304                    start: 'top 85%',
305                }
306            });
307        }
308    } else {
309        if (translateX_value > 0 && !translateY_value) {
310            let split_word = new SplitText(word_anim_item, {
311                type: "chars, words"
312            })
313            gsap.from(split_word.words, {
314                duration: 1,
315                delay: data_delay,
316                x: translateX_value,
317                autoAlpha: 0,
318                stagger: stagger_value
319            });
320        }
321
322        if (translateY_value > 0 && !translateX_value) {
323            let split_word = new SplitText(word_anim_item, {
324                type: "chars, words"
325            })
326            gsap.from(split_word.words, {
327                duration: 1,
328                delay: data_delay,
329                y: translateY_value,
330                autoAlpha: 0,
331                stagger: stagger_value
332            });
333        }
334
335        if (translateY_value > 0 && translateX_value > 0) {
336            let split_word = new SplitText(word_anim_item, {
337                type: "chars, words"
338            })
339            gsap.from(split_word.words, {
340                duration: 1,
341                delay: data_delay,
342                x: translateX_value,
343                y: translateY_value,
344                autoAlpha: 0,
345                stagger: stagger_value
346            });
347        }
348
349        if (!translateX_value && !translateY_value) {
350            let split_word = new SplitText(word_anim_item, {
351                type: "chars, words"
352            })
353            gsap.from(split_word.words, {
354                duration: 1,
355                delay: data_delay,
356                x: 20,
357                autoAlpha: 0,
358                stagger: stagger_value
359            });
360        }
361
362    }
363
364});
365

366////////////////////////////// ///////////////////////
367// Has Fade Animation 
368////////////////////////////// ///////////////////////
369let fadeArray_items = document.querySelectorAll(".has_fade_anim");
370if (fadeArray_items.length > 0) {
371    const fadeArray = gsap.utils.toArray(".has_fade_anim")
372    // gsap.set(fadeArray, {opacity:0})
373    fadeArray.forEach((item, i) => {
374
375        var fade_direction = "bottom"
376        var onscroll_value = 1
377        var duration_value = 1.15
378        var fade_offset = 50
379        var delay_value = 0.15
380        var ease_value = "power2.out"
381
382        if (item.getAttribute("data-fade-offset")) {
383            fade_offset = item.getAttribute("data-fade-offset");
384        }
385        if (item.getAttribute("data-duration")) {
386            duration_value = item.getAttribute("data-duration");
387        }
388
389        if (item.getAttribute("data-fade-from")) {
390            fade_direction = item.getAttribute("data-fade-from");
391        }
392        if (item.getAttribute("data-on-scroll")) {
393            onscroll_value = item.getAttribute("data-on-scroll");
394        }
395        if (item.getAttribute("data-delay")) {
396            delay_value = item.getAttribute("data-delay");
397        }
398        if (item.getAttribute("data-ease")) {
399            ease_value = item.getAttribute("data-ease");
400        }
401
402        let animation_settings = {
403            opacity: 0,
404            ease: ease_value,
405            duration: duration_value,
406            delay: delay_value,
407        }
408
409        if (fade_direction == "top") {
410            animation_settings['y'] = -fade_offset
411        }
412        if (fade_direction == "left") {
413            animation_settings['x'] = -fade_offset;
414        }
415
416        if (fade_direction == "bottom") {
417            animation_settings['y'] = fade_offset;
418        }
419
420        if (fade_direction == "right") {
421            animation_settings['x'] = fade_offset;
422        }
423
424        if (onscroll_value == 1) {
425            animation_settings['scrollTrigger'] = {
426                trigger: item,
427                start: 'top 85%',
428            }
429        }
430        gsap.from(item, animation_settings);
431    })
432}
433
434let mm = gsap.matchMedia();
435                
436mm.add("(min-width: 1024px)", () => {
437
438    var pin_list = document.querySelectorAll(".section-item")
439    pin_list.forEach((item) => {
440        console.log(item)
441        gsap.to(item, {
442            scrollTrigger: {
443                trigger: item,
444                markers: false,
445                pin: true,
446                pinSpacing: false,
447                start: "bottom bottom",
448                end: "bottom -=500"
449            },
450        });
451    })
452
453});