✏️ Customization Guide
Below is a breakdown of what each part does and what parameters you can change:
This guide explains where to find the code, how to customize animation parameters like timing and easing, and how to completely remove the script if needed.
🔧 Where to Find and Edit the Code
To locate and edit the animation scripts in your project:
Go to your Webflow project
Click on “Site Settings”
Navigate to the “Custom Code” tab
Scroll down to the “Before </body> tag” section
Paste or edit the script there
Click Save Changes
Publish your site to see the effects
✅ 1. Main Text & Button Animation
🔄 You can customize:
delay: Time before the animation starts (e.g., 0.5 → 1 for slower start).
duration: How long the animation takes (e.g., 0.8 → 1.2).
x: Horizontal start position. Increase to move from farther away.
autoAlpha: Opacity + visibility. Usually stays at 0 to fade in.
stagger: Delay between each character's appearance (0.04 → 0.1 for more spacing).
ease: Animation curve. Try "power2.out", "elastic.out(1, 0.3)", or "expo.out".
✅ 2. Scrambled Text Animation
.webp)
🔄 You can customize:
text: Final word shown after scramble (e.g.,"thespo").chars: Characters used while scrambling (customize the look).speed: Speed of scrambling (0.5is medium, lower = faster).revealDelay: Delay before letters begin settling (0.3→1for longer chaos).duration: Total animation time (2.2→3or1.5).
✅ 3. Counter Animation
🔄 You can customize:
val: Final number shown (188→ any number).duration: How long the count-up takes (2seconds → slower = longer).ease: Animation curve (e.g.,"power2.out","linear").
🧠 Final Tip
Always test changes on a duplicated version of your project. Animation values like duration, ease, and stagger can significantly affect the user experience. Experiment and preview in Webflow!
