https://www.microad.co.jp/wp-content/themes/microad-corp/assets/js…/front-page-animation.js?ver=1775723405

1document.addEventListener('DOMContentLoaded', function() {
2    const titleText = document.querySelector('.MainVisual-body-title .text');
3    const titleLine = document.querySelector('.MainVisual-body-title .line');
4    const summaryText = document.querySelector('.MainVisual-body-summary-inner .text');
5    const summaryLine = document.querySelector('.MainVisual-body-summary-inner .line');
6    const buttons = document.querySelectorAll('.MainVisual-body-content .Button-round-border-white');
7
8    // Set initial states for the animation
9    gsap.set([titleText, summaryText], { autoAlpha: 0, y: 20 }); // Invisible and slightly down
10    gsap.set(buttons, { autoAlpha: 0 }); // Invisible
11    gsap.set([titleLine, summaryLine], { height: '3px', scaleX: 0, autoAlpha: 1, transformOrigin: "center center" });
12
13    const tl = gsap.timeline({
14        delay: 1.0,
15        defaults: { ease: 'power3.out' }
16    });
17
18    // 1. Lines expand from the center
19    tl.to([titleLine, summaryLine], {
20        scaleX: 1,
21        duration: 1.2,
22        ease: 'power3.easeInOut'
23    });
24
25    // 2. Text appears from below, and buttons appear simultaneously
26    // This starts exactly after the previous animation completes.
27    tl.to([titleText, summaryText], {
28        autoAlpha: 1,
29        y: 0,
30        duration: 0.6
31    });
32
33    tl.to(buttons, {
34        autoAlpha: 1,
35        duration: 0.6,
36        stagger: 0.15
37    }, "<"); // "<" ensures this starts at the same time as the text animation above
38
39    // 3. Fade out the lines after a brief moment
40    tl.to([titleLine, summaryLine], {
41        autoAlpha: 0,
42        duration: 0.4
43    }, "-=0.3"); // Overlap the fade-out with the end of the text/button animation
44});