racconnect-support-website/script.js at main · hamburnyog/racconnect-support-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
gsap.registerPlugin(ScrollTrigger);

document.addEventListener('DOMContentLoaded', () => {
    // Navbar Scroll Effect
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('shadow-lg', 'bg-white/90');
            navbar.classList.remove('bg-white/70');
        } else {
            navbar.classList.remove('shadow-lg', 'bg-white/90');
            navbar.classList.add('bg-white/70');
        }
    });

    // Hero Section Animations
    gsap.from('#home h1', {
        y: 50,
        opacity: 0,
        duration: 1,
        ease: 'power3.out'
    });

    gsap.from('#home p', {
        y: 30,
        opacity: 0,
        duration: 1,
        delay: 0.2,
        ease: 'power3.out'
    });

    gsap.from('#home div.flex', {
        y: 20,
        opacity: 0,
        duration: 1,
        delay: 0.4,
        ease: 'power3.out'
    });

    gsap.from('#hero-mockup', {
        y: 100,
        opacity: 0,
        duration: 1.5,
        delay: 0.6,
        ease: 'power4.out'
    });

    // Features Section Scroll Animations
    gsap.from('.section-header', {
        scrollTrigger: {
            trigger: '.section-header',
            start: 'top 80%',
        },
        y: 50,
        opacity: 0,
        duration: 1,
        ease: 'power3.out'
    });

    gsap.from('.feature-card', {
        scrollTrigger: {
            trigger: '#features',
            start: 'top 70%',
        },
        y: 50,
        opacity: 0,
        duration: 0.8,
        stagger: 0.2,
        ease: 'power3.out'
    });

    // Screenshot Showcase Carousel Animation
    const track = document.getElementById('carousel-track');
    if (track) {
        gsap.to(track, {
            scrollTrigger: {
                trigger: '#screenshots',
                start: 'top top',
                end: () => `+=${track.offsetWidth}`,
                pin: true,
                scrub: 1,
                anticipatePin: 1,
            },
            x: () => -(track.scrollWidth - window.innerWidth + 100),
            ease: 'none',
        });
    }

    // Support Section Animations
    gsap.from('#support a', {
        scrollTrigger: {
            trigger: '#support',
            start: 'top 80%',
        },
        scale: 0.9,
        opacity: 0,
        duration: 0.8,
        stagger: 0.2,
        ease: 'back.out(1.7)'
    });
});

// Policy Tabs Logic
function switchTab(id) {
    const panes = document.querySelectorAll('.policy-pane');
    const tabs = document.querySelectorAll('#policy-tabs button');

    panes.forEach(pane => pane.classList.add('hidden'));
    document.getElementById(id).classList.remove('hidden');

    tabs.forEach(tab => {
        tab.classList.remove('text-slate-900', 'border-primary', 'border-b-2');
        tab.classList.add('text-slate-400');
    });

    const activeTab = event.currentTarget;
    activeTab.classList.remove('text-slate-400');
    activeTab.classList.add('text-slate-900', 'border-primary', 'border-b-2');
}

// Smooth Scrolling for all links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            window.scrollTo({
                top: target.offsetTop - 80,
                behavior: 'smooth'
            });
        }
    });
});