This script powers a premium text-reveal animation using GSAP, making headings animate smoothly as they scroll into view. It loads several GSAP tools (SplitText, ScrollTrigger, and a custom easing curve) and applies them to any element marked with data-split="heading". When the page loads, the script splits the heading into lines and animates each one upward with a soft, modern easing as soon as it enters the viewport. The effect runs once per page view and gives the text a clean, cinematic reveal. You can find this code in the Before </body> custom code section on every page, and it works automatically—just add data-split="heading" to any heading you want to animate.

Here’s the short, client-friendly explanation in one single paragraph, specifying that this script is used only in the section where the number animations appear:This script powers the animated number counters on the page, making any element with the class .numberanimation smoothly count up from 0 to its final value when it scrolls into view. It uses GSAP and ScrollTrigger to detect when each number enters the viewport and then animates it with a dynamic duration based on the size of the number, creating a clean and professional counting effect. The script runs only on the section where these counters are used, and it activates automatically—just apply the class .numberanimation to any number you want to animate.

In the project settings, by pressing the gear icon, you can see the custom code attached to the website. There you can access both smooth scrolling and modify its speed, as well as scroll reveal. You can see that the variable references are made to the custom properties in each variable, such as "split-text".

Keeping it that way while you customize the site is simple if you follow these Best Practices:​1. Image Optimization (The "Golden Rules")​Format: Always use .WebP. It’s much lighter than PNG or JPG.​Dimensions: Don’t upload a 4000px image if it will only be displayed at 800px. Resize your assets before uploading.​Weight: Aim for hero images to be under 300KB and icons/UI elements under 30KB.​Lazy Load: Ensure all images are set to "Lazy Load" in the settings (standard in Webflow) to prioritize the initial loading speed.​2. Maintaining the "Smooth" Feel (Lenis)​The fluid scrolling is powered by the Lenis script in the Before </body> tag section of the page settings.​Consistency: If you create a new page, make sure to copy that script into the new page's settings.​Avoid Overload: Too many scroll-triggered animations (parallax) can sometimes conflict with smooth scrolling. Keep animations subtle and elegant.​3. Clean Development & Structure​Reuse Classes: Try to use the existing global classes I’ve built. This keeps the CSS file small and prevents the project from becoming "bloated."​Clean Up: Before publishing, use the "Style Clean Up" tool (the brush icon in the Style Manager) to delete any unused classes.​Limit Scripts: Avoid adding too many third-party plugins (chatbots, heavy trackers) as they are the main cause of slow loading times.