425 lines
22 KiB
HTML
425 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Executive Briefing: Sales Intelligence & Yield</title>
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
brandDark: '#081734',
|
||
brandLight: '#DDEEFE',
|
||
brandCyan: '#00E5FF',
|
||
brandGold: '#FFD42C',
|
||
brandSlate: '#1E293B'
|
||
},
|
||
fontFamily: {
|
||
'head': ['Space Grotesk', 'sans-serif'],
|
||
'body': ['Inter', 'sans-serif']
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
body {
|
||
background-color: #081734;
|
||
color: #DDEEFE;
|
||
font-family: 'Inter', sans-serif;
|
||
overflow-x: hidden;
|
||
line-height: 1.6;
|
||
}
|
||
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
|
||
|
||
.glass-card {
|
||
background: rgba(221, 238, 254, 0.03);
|
||
backdrop-filter: blur(12px);
|
||
border: 1px solid rgba(0, 229, 255, 0.1);
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.section-screen {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
padding: 4rem 2rem;
|
||
}
|
||
|
||
/* Toby Animation */
|
||
.toby-float { animation: float 6s ease-in-out infinite; }
|
||
@keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } }
|
||
|
||
#toby-fixed {
|
||
position: fixed;
|
||
bottom: 40px;
|
||
right: 40px;
|
||
width: 180px;
|
||
z-index: 100;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
#toby-bubble {
|
||
background: #DDEEFE;
|
||
color: #081734;
|
||
padding: 1rem 1.5rem;
|
||
border-radius: 18px;
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
text-align: center;
|
||
box-shadow: 0 10px 30px rgba(0,229,255,0.2);
|
||
max-width: 250px;
|
||
}
|
||
#toby-bubble::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-width: 10px 10px 0;
|
||
border-style: solid;
|
||
border-color: #DDEEFE transparent transparent transparent;
|
||
}
|
||
|
||
/* Custom Progress Bar */
|
||
#progress-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4px;
|
||
background: rgba(255,255,255,0.05);
|
||
z-index: 1000;
|
||
}
|
||
#progress-bar {
|
||
height: 100%;
|
||
width: 0%;
|
||
background: linear-gradient(90deg, #00E5FF, #30BDEA);
|
||
box-shadow: 0 0 10px rgba(0,229,255,0.5);
|
||
}
|
||
|
||
.text-gradient {
|
||
background: linear-gradient(135deg, #FFF 0%, #00E5FF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.stat-value { font-size: 4rem; font-weight: 700; line-height: 1; }
|
||
|
||
/* White Space Helpers */
|
||
.content-width { max-width: 1100px; width: 100%; }
|
||
|
||
/* Reveal Animations */
|
||
.reveal { opacity: 0; transform: translateY(30px); }
|
||
</style>
|
||
</head>
|
||
<body class="antialiased">
|
||
|
||
<div id="progress-container"><div id="progress-bar"></div></div>
|
||
|
||
<!-- Toby Fixed -->
|
||
<div id="toby-fixed" class="toby-float">
|
||
<div id="toby-bubble">Bereit für den Yield-Check?</div>
|
||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAc2CAYAAABaJTzmAAAACXBIWXMAABsRAAAbEQEEnGAvAAAEvmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpBdHRyaWI9J2h0dHA6Ly9ucy5hdHRyaWJ1dGlvbi5jb20vYWRzLzEuMC8nPgogIDxBdHRyaWI6QWRzPgogICA8cmRmOlNlcT4KICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0nUmVzb3VyY2UnPgogICAgIDxBdHRyaWI6Q3JlYXRlZD4yMDI2LTAxLTEzPC9BdHRyaWI6Q3JlYXRlZD4KICAgICA8QXR0cmliOkV4dExtZD4zZjE1OTM5Ny04MWM3LTQyM2ItOWViMy02ODYyYzAxZjM4NGI8L0F0dHJpYjpFeHRJZD4KICAgICA8QXR0cmliOkZiSWQ+NTI1MjY1OTE0MTc5NTgwPC9BdHRyaWI6RmJJZD4KICAgICA8QXR0cmliOlRvdWNoVHlwZT4yPC9BdHRyaWI6VG91Y2hUeXBlPgogICAgPC9yZGY6bGk+CiAgIDwvJmRmOlNlcT4KICB8L0F0dHJpYjpBZHM+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOnRpdGxlPgogICA8cmRmOkFsdD4KICAgIDxyZGY6bGkgeG1sOmxhbmc9J3gtZGVmYXVsdCc+Um9ib1BsYW5ldF9BdmF0YXJfaGVsbGJsYXUuYWkgLSAxPC9yZGY6bGk+CiAgIDwvcmRmOkFsdD4KICA8L2RjOnRpdGxlPgogPC9yZGY6RGVzY3JpcHRpb24+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpwZGY9J2h0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8nPgogIDxwZGY6QXV0aG9yPldhY2tsZXJHcm91cDwvcGRmOkF1dGhvcm4+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpDcmVhdG9yVG9vbD5DYW52YSBkb2M9REFHLVN1Y0tTeXMgdXNlcj1VQUVUOG1KY3lhSSBicmFuZD1CQUVUOGd0OERsTSB0ZW1wbGF0ZT08L3htcDpDcmVhdG9yVG9vbD4KIDwvcmRmOkRlc2NyaXB0aW9uPgo8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSdyJz8+qsA63gAACAASURBVHic7N15uG5z/fj/zx+/6/urvqU5aVCSSFGhyJjMZAghY6aMoQxJEioaKBkjkTEJERWJFAopY6nOWvc+xzmpnNa695n4616v73qvc/o0knOcc9733vvxvK7HtU/lCnvf+17v4V7v9T//I0mSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmS... [truncated]" alt="Toby" class="w-full">
|
||
</div>
|
||
|
||
<!-- 1. Intro Screen -->
|
||
<section class="section-screen">
|
||
<div class="content-width text-center">
|
||
<h4 class="text-brandCyan uppercase tracking-[0.3em] mb-6 reveal font-head">Executive Briefing</h4>
|
||
<h1 class="text-7xl md:text-8xl font-bold mb-8 reveal leading-tight">Sales Intelligence <br> <span class="text-gradient">& Yield Control</span></h1>
|
||
<p class="text-xl md:text-2xl text-brandLight/60 max-w-2xl mx-auto mb-12 reveal font-body font-light">
|
||
Vom passiven Archiv zum aktiven Steuerungsinstrument. <br>
|
||
Die Wahrheit hinter den CRM-Zahlen.
|
||
</p>
|
||
<div class="flex justify-center gap-4 reveal">
|
||
<div class="h-[1px] w-24 bg-brandCyan/30 self-center"></div>
|
||
<span class="text-brandCyan font-mono uppercase text-sm tracking-widest">Scrollen zum Start</span>
|
||
<div class="h-[1px] w-24 bg-brandCyan/30 self-center"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. The Vision / Motto -->
|
||
<section class="section-screen bg-brandSlate/20">
|
||
<div class="content-width">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
|
||
<div class="reveal">
|
||
<h2 class="text-5xl mb-8">"Vom Wiegen allein wird die Sau nicht fetter."</h2>
|
||
<p class="text-lg text-brandLight/70 mb-8">
|
||
SuperOffice verwaltet Kontakte. Dieses Dashboard steuert den Erfolg. Wir haben aufgehört zu raten und angefangen zu wissen.
|
||
</p>
|
||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||
<div class="p-6 bg-white/5 rounded-2xl border border-white/10">
|
||
<p class="text-3xl font-bold text-white">67%</p>
|
||
<p class="text-xs uppercase tracking-widest text-brandLight/40">CRM White Space</p>
|
||
<p class="text-[10px] text-brandLight/50 mt-1">10.000+ Accounts ohne Historie</p>
|
||
</div>
|
||
<div class="p-6 bg-brandCyan/10 rounded-2xl border border-brandCyan/20">
|
||
<p class="text-3xl font-bold text-brandCyan">Aktiv</p>
|
||
<p class="text-xs uppercase tracking-widest text-brandCyan/60">Steuerung</p>
|
||
<p class="text-[10px] text-brandCyan/50 mt-1">ROI-getriebene Allokation</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="relative reveal">
|
||
<div class="absolute -inset-4 bg-brandCyan/10 blur-3xl rounded-full"></div>
|
||
<div class="glass-card p-12 relative border-brandCyan/30 flex flex-col items-center justify-center text-center">
|
||
<div class="stat-value text-brandCyan mb-2">100%</div>
|
||
<p class="uppercase tracking-widest text-sm font-bold">Transparenz</p>
|
||
<div class="w-full h-px bg-white/10 my-8"></div>
|
||
<p class="text-brandLight/50 italic">"Das Dashboard macht sich die Hände schmutzig, wo SuperOffice schweigt."</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. Risk Management / Clean Pipeline -->
|
||
<section class="section-screen">
|
||
<div class="content-width">
|
||
<h2 class="text-5xl mb-16 text-center reveal">Pipeline Risk Management</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<!-- Gross -->
|
||
<div class="glass-card p-10 reveal" style="transition-delay: 0.1s">
|
||
<p class="text-brandLight/50 mb-4 uppercase text-xs font-bold tracking-widest">Brutto-Hoffnung</p>
|
||
<div class="stat-value text-white mb-2">5,2M</div>
|
||
<p class="text-sm text-brandLight/70">Gross Pipeline in SuperOffice</p>
|
||
</div>
|
||
<!-- Bloat -->
|
||
<div class="glass-card p-10 border-red-500/30 reveal" style="transition-delay: 0.2s">
|
||
<p class="text-red-400 mb-4 uppercase text-xs font-bold tracking-widest">Duplicate Bloat</p>
|
||
<div class="stat-value text-red-500 mb-2">-31%</div>
|
||
<p class="text-sm text-brandLight/70">Angebotsvarianten & Redundanz</p>
|
||
</div>
|
||
<!-- Netto -->
|
||
<div class="glass-card p-10 border-brandCyan/50 bg-brandCyan/5 reveal" style="transition-delay: 0.3s">
|
||
<p class="text-brandCyan mb-4 uppercase text-xs font-bold tracking-widest">Reale Wahrheit</p>
|
||
<div class="stat-value text-brandCyan mb-2">3,6M</div>
|
||
<p class="text-sm text-brandLight/70">Clean Pipeline (Investitionsbasis)</p>
|
||
</div>
|
||
</div>
|
||
<p class="mt-12 text-center text-brandLight/40 max-w-2xl mx-auto reveal">
|
||
Unser Dashboard erkennt automatisch Dubletten und Varianten. Wir ziehen den Vorhang beiseite und sehen den realen Marktwert.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. Winning DNA / Yield Proof -->
|
||
<section class="section-screen bg-white/5">
|
||
<div class="content-width">
|
||
<div class="text-center mb-20 reveal">
|
||
<h2 class="text-5xl mb-6">Die Winning DNA</h2>
|
||
<p class="text-xl text-brandLight/60">Datenbelegte Erfolgsmuster statt Bauchgefühl.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||
<div class="glass-card p-12 reveal">
|
||
<h3 class="text-2xl mb-8 flex items-center gap-3">
|
||
<span class="w-8 h-8 rounded bg-brandCyan/20 flex items-center justify-center text-brandCyan">01</span>
|
||
Der Vor-Ort-Hebel
|
||
</h3>
|
||
<div class="flex items-end gap-6 mb-8">
|
||
<div class="w-full bg-white/5 h-48 rounded-t-lg relative overflow-hidden">
|
||
<div class="absolute bottom-0 w-full bg-brandLight/20 h-[38%] flex items-center justify-center text-xs font-bold">9%</div>
|
||
</div>
|
||
<div class="w-full bg-brandCyan/10 h-48 rounded-t-lg relative overflow-hidden">
|
||
<div class="absolute bottom-0 w-full bg-brandCyan h-[100%] flex items-center justify-center text-brandDark font-bold text-xl">24%</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-3xl font-bold text-brandCyan mb-2">+159% Win-Rate</p>
|
||
<p class="text-brandLight/60">Sobald eine Demo vor Ort stattfindet, verdreifacht sich die Abschlusswahrscheinlichkeit.</p>
|
||
</div>
|
||
|
||
<div class="glass-card p-12 reveal">
|
||
<h3 class="text-2xl mb-8 flex items-center gap-3">
|
||
<span class="w-8 h-8 rounded bg-brandCyan/20 flex items-center justify-center text-brandCyan">02</span>
|
||
Follow-Up Speed
|
||
</h3>
|
||
<div class="flex items-center justify-between gap-8 mb-12">
|
||
<div class="text-center">
|
||
<p class="text-4xl font-bold text-white/30 line-through">37</p>
|
||
<p class="text-xs uppercase tracking-widest text-brandLight/40">Tage (Alt)</p>
|
||
</div>
|
||
<div class="flex-1 h-px bg-white/10 relative">
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-brandCyan flex items-center justify-center text-brandDark font-bold">➔</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<p class="text-6xl font-bold text-brandCyan">10</p>
|
||
<p class="text-xs uppercase tracking-widest font-bold">Tage (Neu)</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-xl text-white mb-2">Reaktionszeit massiv gesenkt.</p>
|
||
<p class="text-brandLight/60">Das Dashboard erkennt Stagnation sofort und triggert den Sales-Manager.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. Action Hub / ROI -->
|
||
<section class="section-screen">
|
||
<div class="content-width">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
|
||
<div class="reveal order-2 md:order-1">
|
||
<div class="glass-card p-10 border-brandCyan/40 relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 p-4 opacity-10 text-8xl">✨</div>
|
||
<h2 class="text-4xl mb-6">Der Activity Hub</h2>
|
||
<p class="text-lg text-brandLight/70 mb-8">
|
||
Das Dashboard ist kein Rückspiegel, es ist ein Gaspedal. Über den "Magic Wand" generiert der Manager mit einem Klick personalisierte Nachrichten.
|
||
</p>
|
||
<div class="space-y-6">
|
||
<div class="flex items-center gap-6">
|
||
<div class="stat-value text-brandGold">20%</div>
|
||
<p class="text-xl font-semibold leading-tight">Reaktionsquote auf Rückrufbitte</p>
|
||
</div>
|
||
<div class="p-4 bg-white/5 rounded-lg border border-white/10">
|
||
<p class="text-xs uppercase tracking-widest text-brandCyan font-bold mb-2">Sicherheit & Transparenz</p>
|
||
<p class="text-sm text-brandLight/60">Vollständige Entra ID Integration. Jede Aktion ist personengebunden und fließt direkt als Aktivität zurück ins CRM.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal order-1 md:order-2">
|
||
<h3 class="text-brandCyan font-mono uppercase tracking-widest mb-6">Effizienz-Hebel</h3>
|
||
<h2 class="text-6xl mb-8 leading-tight">Vom Reporting zur <span class="text-gradient">Interaktion.</span></h2>
|
||
<p class="text-xl text-brandLight/60 font-light">
|
||
Wir befreien den Vertrieb von administrativen Fesseln. <br>
|
||
Mehr Zeit für Kunden, weniger Zeit in Excel-Silos.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. Scalability / The Machine -->
|
||
<section class="section-screen bg-brandCyan/5">
|
||
<div class="content-width text-center">
|
||
<div class="inline-block glass-card px-8 py-3 mb-10 reveal">
|
||
<span class="text-brandCyan font-mono uppercase tracking-widest text-sm">Prognose & Skalierung</span>
|
||
</div>
|
||
<h2 class="text-7xl mb-12 reveal font-head uppercase tracking-tighter">The Machine</h2>
|
||
<p class="text-2xl text-brandLight/70 max-w-3xl mx-auto mb-16 reveal font-light">
|
||
Wir übersetzen Ihre strategischen Monatsziele live in wöchentliche Lead-Vorgaben für jeden Sales-Manager – individuell berechnet auf Basis ihrer Hit-Rate.
|
||
</p>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 reveal">
|
||
<div class="p-8 border-r border-white/5">
|
||
<p class="text-brandLight/40 mb-2 uppercase text-xs tracking-widest">Ziel-Vorgabe</p>
|
||
<p class="text-4xl font-bold text-white">300k €</p>
|
||
</div>
|
||
<div class="p-8 border-r border-white/5">
|
||
<p class="text-brandLight/40 mb-2 uppercase text-xs tracking-widest">Erforderliche Demos</p>
|
||
<p class="stat-value text-brandCyan">14</p>
|
||
</div>
|
||
<div class="p-8">
|
||
<p class="text-brandLight/40 mb-2 uppercase text-xs tracking-widest">Leads pro Woche</p>
|
||
<p class="stat-value text-brandGold">42</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-20 reveal">
|
||
<p class="text-brandCyan font-bold uppercase tracking-widest text-sm">Wachstum wird vorhersagbar.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7. Conclusion -->
|
||
<section class="section-screen">
|
||
<div class="content-width text-center">
|
||
<h2 class="text-6xl mb-12 reveal">Das Fundament für <br> <span class="text-gradient">RoboPlanet 2026</span></h2>
|
||
<div class="max-w-xl mx-auto space-y-8 reveal">
|
||
<p class="text-xl text-brandLight/70">
|
||
Wir haben das CRM modernisiert, die Pipeline bereinigt und die Erfolgs-DNA entschlüsselt.
|
||
</p>
|
||
<div class="h-px w-32 bg-brandCyan mx-auto opacity-30"></div>
|
||
<p class="text-2xl font-bold text-white uppercase tracking-widest">Bereit zum Abheben.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Scripts -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||
<script>
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
const tobyFixed = document.getElementById('toby-fixed');
|
||
const tobyBubble = document.getElementById('toby-bubble');
|
||
const progressBar = document.getElementById('progress-bar');
|
||
|
||
const tobyMessages = [
|
||
"Willkommen im Maschinenraum!",
|
||
"Hier wird die 'Brutto-Hoffnung' zur Realität.",
|
||
"31% weniger Müll in der Pipeline!",
|
||
"Vor-Ort-Termine sind unser Gold.",
|
||
"Magic Wand: 20% Antwortquote!",
|
||
"Individuelle Ziele für jeden Manager.",
|
||
"Wachstum ist jetzt Mathematik!"
|
||
];
|
||
|
||
function updateToby(index) {
|
||
if (tobyMessages[index]) {
|
||
tobyBubble.innerHTML = tobyMessages[index];
|
||
gsap.fromTo(tobyBubble, { scale: 0.8, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.4, ease: "back.out(1.7)" });
|
||
}
|
||
}
|
||
|
||
// Reveal Animations
|
||
gsap.utils.toArray('.reveal').forEach((el, i) => {
|
||
gsap.to(el, {
|
||
scrollTrigger: {
|
||
trigger: el,
|
||
start: "top 85%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
opacity: 1,
|
||
y: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
});
|
||
|
||
// Toby Visibility & Updates
|
||
ScrollTrigger.create({
|
||
trigger: "body",
|
||
start: "100px top",
|
||
onEnter: () => gsap.to(tobyFixed, { opacity: 1, duration: 0.5 }),
|
||
onLeaveBack: () => gsap.to(tobyFixed, { opacity: 0, duration: 0.5 })
|
||
});
|
||
|
||
const sections = gsap.utils.toArray('section');
|
||
sections.forEach((section, i) => {
|
||
ScrollTrigger.create({
|
||
trigger: section,
|
||
start: "top center",
|
||
onEnter: () => updateToby(i),
|
||
onEnterBack: () => updateToby(i)
|
||
});
|
||
});
|
||
|
||
// Progress Bar
|
||
gsap.to(progressBar, {
|
||
width: "100%",
|
||
ease: "none",
|
||
scrollTrigger: { scrub: 0.3 }
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html> |