DataWatch Template Instructions

Smooth Scroll

What it does

This code adds smooth scrolling to the whole template. Instead of jumping instantly, the page glides softly when you scroll. It also keeps scroll animations (GSAP ScrollTrigger) perfectly in sync with the smooth movement.

How to add it

In Webflow, go to Site settings → Custom code.
Paste the code below into the Footer code box.
Click Save, then Publish your site. Done!

How to adjust it

Only edit the numbers in the ADJUST HERE block at the top of the code:

lerp — how smooth it feels. Lower (0.05) = slower & smoother. Higher (0.2) = snappier.
wheelMultiplier — mouse wheel speed. 1 = normal, 2 = twice as fast, 0.5 = slower.
touchMultiplier — same idea, but for touchscreens and trackpads.

How to turn it off

Delete the whole code from the Footer code box and publish again. Scrolling goes back to normal right away.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.25/dist/lenis.min.js"></script>
<script>
  // ========== ADJUST HERE ==========
  const smoothScroll = {
    // Smoothness: lower = smoother/slower, higher = snappier (0.05–0.2 is typical)
    lerp: 0.05,
    // Wheel speed: 1 = normal, higher = faster scroll, lower = slower
    wheelMultiplier: 1,
    // Touch speed: same idea for mobile/trackpad
    touchMultiplier: 1,
  };
  // =================================

  // Lenis smooth scroll + GSAP sync
  // Remove this block to turn smooth scroll off
  gsap.registerPlugin(ScrollTrigger);

  // autoRaf: false - GSAP ticker drives Lenis instead
  const lenis = new Lenis({
    autoRaf: false,
    lerp: smoothScroll.lerp,
    wheelMultiplier: smoothScroll.wheelMultiplier,
    touchMultiplier: smoothScroll.touchMultiplier,
  });

  // Keep ScrollTrigger in sync with Lenis scroll position
  lenis.on("scroll", ScrollTrigger.update);

  // Run Lenis on every GSAP frame
  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  // Avoid GSAP lag smoothing fighting Lenis
  gsap.ticker.lagSmoothing(0);
</script>

AI-Assisted Editing (MCP)

What is the Webflow MCP?

The Webflow MCP server connects AI agents directly to DataWatch. Describe changes in natural language to update CMS content, edit pages, manage assets, and maintain the design system — without writing API calls yourself.

When editing DataWatch, agents work within your existing Webflow permissions, and every change is recorded in the site activity log.

Before you start

A Webflow account with access to the site you want to edit
For Designer-specific tasks: open the site in Webflow Designer and launch the MCP Bridge App from the Apps panel

Cursor

Recommended — use the Webflow plugin:

Install the Webflow plugin from the Cursor Marketplace
Click Add to Cursor and authorize your Webflow account
Select the sites and Workspaces to connect

Manual setup: Add a webflow entry with URL https://mcp.webflow.com/mcp to your project .cursor/mcp.json file. Then go to Settings → MCP & Integrations and click Connect to complete OAuth.

Claude Code

Install Claude Code and verify the installation
Run claude mcp add --transport http webflow https://mcp.webflow.com/mcp
Start Claude Code and run /mcp to authenticate via OAuth
Select the Webflow sites to authorize and install the MCP Bridge App

To scope the configuration to a single project folder, add the -s project flag when running the add command.

Codex

OpenAI Codex uses the same remote MCP server. Add a [mcp_servers.webflow] entry with url = "https://mcp.webflow.com/mcp" to your ~/.codex/config.toml or project .codex/config.toml file.

Then run codex mcp login webflow to complete OAuth. Use /mcp in the Codex TUI to confirm the server is connected.

What you can do with MeetOS

Update MeetOS CMS items — blog posts, authors, and categories
Improve SEO metadata, set attributes, and rename assets in bulk
Audit pages for missing alt text, broken links, and incomplete meta descriptions
Edit elements, styles, and variables through natural-language prompts

Limitations

Webflow Interactions (IX3) cannot be created or edited via MCP
Some Designer features require the MCP Bridge App to be open
Each authorization connects to one workspace — re-authenticate to switch

Full documentation: developers.webflow.com/mcp

Instructions