Step-by-Step Guide

Where to find it: Home Page Settings > Custom Code > Before </body> tag

What it does:

This script powers the seamless, never-ending project loop on the homepage. It automatically duplicates your CMS projects and locks the browser's native scroll, replacing it with a custom mathematical scroll that feels incredibly heavy, smooth, and premium.

Note: For the best user experience, this infinite loop is intentionally disabled on mobile devices and tablets (screens under 991px), reverting to a native touch scroll.

How to customize it:

Scroll down in the code until you see the 🎛️ SMOOTH SCROLL SETTINGS section. You only need to touch these two numbers:

1. Scroll Speed (let scrollSpeed = 0.0004;)This controls how far the screen moves with one click of your mouse wheel.

• Make it faster: Increase the number (e.g., 0.0008 or 0.001).
• Make it slower: Decrease the number (e.g., 0.0002).

2. Smoothness (let smoothness = 0.028;)This controls the "glide" or friction of the scroll after you stop moving your mouse wheel.

• 0.1 = Snappy and abrupt (stops instantly).
• 0.04 to 0.02 = Buttery smooth and heavy (Recommended).
• 0.005 = Feels like sliding on ice (takes a long time to stop).

⚠️ CRITICAL RULE: Never add negative margins to the .collection-item or .collection-list-wrapper in Webflow. If you want the images closer together, use the Flexbox "Gap" property on the .collection-list. Negative margins will break the infinite math and cause a visual jump!

‍

Where to find it: Project Settings > Custom Code > Before </body> tag (or individual Page Settings for pages other than Home).

What it does:

For the rest of the website (About, Projects, Blog, Contact), we use Lenis, a state-of-the-art smooth scroll library. It removes the clunky, jagged scrolling of standard web browsers and replaces it with a fluid, momentum-based glide.

How to customize it:

Look for the Initialize Lenis section in the code. You can adjust the following values to change how heavy or fast the page feels:

1. Duration (duration: 1.2,)This controls how long the scrolling momentum lasts.

• 0.8 = Faster, lighter page feel.
• 1.2 = Default Daylight premium weight.
• 2.0 = Very heavy, cinematic, slow glide.

2. Touch Multiplier (touchMultiplier: 2,)This speeds up how fast the page moves when users swipe on trackpads or mobile devices. You can increase this to 3 if the site feels too slow on laptops.

⚠️ Important Settings to Leave Alone:

• smoothTouch: false — Keep this false! Forcing smooth scroll on mobile touch screens creates a terrible, laggy experience. Native iOS/Android scrolling is always better for phones.
• Keep your main page wrappers padded with at least 1px of bottom margin/padding to ensure Lenis can calculate the absolute bottom of the page perfectly.

‍

Updating the branding is the first step to making the template yours.

• Enter the Component: Double-click the Navbar component to enter edit mode.
• Select the Image: Click on the Brand Image (Logo) placeholder.
• Replace: Click the Gear Icon (Settings) in the top-right of the element and select Replace Image. Upload your logo, and it will update across the entire site.

The CMS (Content Management System) is where you'll manage your dynamic content like Case Studies or Blogs.

• Access the CMS: Click the CMS icon (stacked coins) in the top-left toolbar.
• Choose a Collection: Navigate to the Case Studies or Blogs collection.
• Edit or Add: Click on an existing item to change the text and images, or click the + New button to create a brand-new post from scratch.

To ensure your site looks great on Google and social media, you need to update your metadata.

• Open Pages: Open the Pages list on the left-hand side.
• Page Settings: Hover over the page you want to edit and click the Gear Icon next to the page name.
• Update Info: Scroll down to the SEO Settings section to update your Title Tag and Meta Description.
• Social Sharing: Keep scrolling to the Open Graph section to upload the image people see when you share your link on LinkedIn or X (Twitter).

These are the small icons that appear in browser tabs and on phone home screens.

• Go to Settings: Click the Webflow Logo in the top-left corner and select Site Settings.
• Upload Icons: Navigate to General > Icons.
• Format: Upload your Favicon (32x32px) and your Webclip (256x256px). Don't forget to Publish your site for these changes to take effect!

‍

‍