Smooth Full-Page Web

Transform your landing pages with smooth, full-screen snap scrolling! 🚀 Smooth Full-Page Sections brings an immersive, high-end scrolling experience directly to Framer. Built with strict performance standards, it delivers fluid section transitions on live sites while staying lightweight inside the editor.

✨ Key Features

• ⚡ Full-Page Snap Scrolling: Automatically snaps sections to 100% viewport height (100vh).

• 🛡 Canvas & SSR Safe: Built using official useIsStaticRenderer checks for zero editor lag and smooth exports.

• 🎨 Flexible Backgrounds:

  • Color: Minimal solid backgrounds.

  • Image: Supports adjustable Blur filters.

  • Video: Auto-playing, looped MP4/WebM videos.

• 🌓 Dynamic Theme Adaptation: Nav links and side text dynamically adjust colors based on the active section's settings.

• 📱 Mobile Controls: Optional vertical text rotation and side-text visibility toggles for small screens.

• 🪄 Fluid Transitions: Smooth CSS entry animations for headings.

⚙ Property Controls Guide

Customize everything directly from Framer’s right sidebar:

• 🔑 License Key: Enter your fullpage.js key (GPLv3 by default).

• 🏷 Logo / Brand: Top-left branding text.

• 📜 Side Text: Position vertical scroll text (Left / Right).

• 🗂 Sections Array:

  • Title & Colors: Section heading & custom text color.

  • BG Type: Toggle Color, Image, or Video.

  • Blur & Overlay: Adjust image blur and dark overlay opacity for readability.

  • Mobile Rotate: Toggle vertical header rotation for mobile.

🚀 Quick Setup

1. Drag Smooth Full-Page Sections onto your canvas.

2. Set Width and Height layout constraints to Fill.

3. Add your sections in the Property Controls panel.

4. Publish your project to see the live snap-scrolling in action! 🌟