Instructions

Introductory Guide: Use this simple guide to start editing your website smoothly.

Support:

Discover Webflow University's extensive library of video lessons to help you get started with ease.
- Getting Started with Webflow 🔗- Lesson library 🔗

Before Publishing:

Delete unused sections/pages, clean up CSS classes, clean up unused interactions and delete unused components.
- Style manager 🔗- Using Interactions 🔗

Animation

In this template, we are using Webflow Interactions, and Webflow GSAP. There is no code for these animations all inbuild in the Webflow.
- Interactions-with-gsap 🔗- Lenis SmoothScroll 🔗

HOVER GALLERY (Image trail on move)

How to Customize the Hover Gallery
  • containerSelector — Selector for the main gallery container where mouse moves are tracked.
  • visualWrapSelector — Selector inside container where image clones are appended.
  • gsapEase — GSAP easing string for scale animation (e.g. "expo.out").
  • cloneStyles — CSS styles for each floating image clone (border-radius, overflow, etc).
  • maxCloneWidthMobileRatio — Width ratio (0–1) of viewport width for clones on small/mobile screens.
  • scaleUpDuration — Duration (seconds) for the clone’s scale-up animation.
  • fadeOutDuration — Duration (seconds) for the clone’s fade-out animation.
  • moveThreshold — Minimum pixel distance cursor must move to spawn a new image clone.
  • gsapEase — GSAP easing string for scale animation (e.g. "expo.out").

Breakpoints:

Test your design on various devices by selecting different options in the viewport's Bottom bar.

Backups:

Restore previous versions from the Backups section in the left sidebar and clicking Settings in case of accidental deletions.

Editing Images and Text:

Edit text by double-clicking on static content or use the CMS section for dynamic text. Replace images easily by clicking on them and choosing "Replace Image."

Dynamic Content (CMS):

Learn how to manage and update dynamic content using the CMS, which instantly updates referenced content across pages.

Components:

Utilize reusable components for efficient editing and consistency across layouts.