https://osg-website-tamplate.vercel.app/animation.js

1function startHomepageAnimation() {
2    const heroSection = document.querySelector('.hero-section');
3    const svgPath = document.querySelector('#wavy-line-svg path');
4    const navBar = document.querySelector('.navbar');
5
6    if (!heroSection || !svgPath || !navBar) return;
7
8    const pathLength = svgPath.getTotalLength();
9    svgPath.style.strokeDasharray = pathLength;
10    svgPath.style.strokeDashoffset = pathLength;
11    
12    const blurProxy = { value: 0 };
13
14    const tl = gsap.timeline({
15        onComplete: () => {
16            if (typeof initializePage !== 'undefined') {
17                initializePage();
18            }
19            navBar.classList.add('scrolled');
20        }
21    });
22
23    tl
24        .to(blurProxy, {
25            value: 5,
26            duration: 2,
27            ease: "power1.inOut",
28            onUpdate: () => {
29                heroSection.style.setProperty('--hero-bg-blur', `${blurProxy.value}px`);
30            }
31        }, 0)
32
33        .fromTo('.logo', 
34            { y: -50, opacity: 0 }, 
35            { y: 0, opacity: 1, duration: 0.8, ease: 'power3.out' },
36            0
37        )
38        .fromTo('.nav-links a', 
39            { y: -30, opacity: 0 },
40            { y: 0, opacity: 1, duration: 1.2, ease: 'elastic.out(1, 0.4)', stagger: 0.1 },
41            "-=0.6"
42        )
43        .to(svgPath, 
44            { strokeDashoffset: 0, duration: 1.5, ease: 'power1.inOut' }, 
45            0.1
46        )
47        .fromTo('.hero-content h1', 
48            { y: 100, opacity: 0 },
49            { y: 0, opacity: 1, duration: 1, ease: 'power3.out' },
50            0.3
51        )
52        .fromTo('.hero-content p', 
53            { y: 80, opacity: 0 },
54            { y: 0, opacity: 1, duration: 1, ease: 'power3.out' },
55            "-=0.8"
56        )
57        .fromTo('.hero-content .btn',
58            { y: 60, opacity: 0 }, 
59            { y: 0, opacity: 1, duration: 1, ease: 'power3.out' },
60            "-=0.8"
61        );
62}