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 🔗

Custom Animation

In this template, we are using GSAP, Swiper, and Lenis. The code for these animations is located in the page settings and is thoroughly documented. Below are links to the libraries' documentation.
- GSAP Documentation 🔗- Lenis SmoothScroll/TextStagger 🔗- Swiper Slider 🔗
SERVICES (Testimonial carousel using Swiper)
Swiper Settings
  • target: Selector for the Swiper container – set this to the ID or class of your slider element.
  • spaceBetween: Spacing in px between slides – controls the gutter space.
  • slidesOffsetAfter: Space after the last slide – adds padding to the end of the slider.
  • loop: Enables/disables infinite loop – set true to repeat slides.
  • resistance: Disables edge resistance – false makes swipe boundaries rigid.
  • grabCursor: Changes cursor to a grab icon – improves UX for draggable sliders.
  • speed: Slide transition duration in ms – controls how fast slides animate.
  • simulateTouch: Enables swipe with mouse/finger – set to true for touch-like feel.
  • threshold: Minimum drag distance to trigger slide – useful for swipe sensitivity.
  • centeredSlides: Centers active slide – true keeps current slide in the center.
  • wrapperClass: Custom class for Swiper wrapper – match with your HTML structure.
  • simulateTouch: Enables swipe with mouse/finger – set to true for touch-like feel.
  • slideClass: Custom class for individual slides – define your slide styling.
  • breakpoints: Responsive slide settings – set how many slides show per view at various widths.

GSAP Animations

You will find the code in Closing </body> tag
How to custmize or update you gSAP animatoins
Navbar Open And Hover Effects
Animation Durations
  • navbarOpen: How long the menu fades/slides in.
  • navbarClose: How long the menu fades/slides out.
  • iconTransform: How fast hamburger lines animate.
  • navItem: How long each nav/social/website link takes to appear.
  • navItemOut: How long each nav item fades out when closing.
  • flicker: Duration of each flicker pulse.
  • flickerReset: How fast letters return to full opacity.
Stagger Timing
  • navItemIn: Delay between nav items during open.
  • navItemOut: Delay between items during close.
Offset Distances
  • navY: Navbar slides this far from the bottom.
  • itemY: Nav links/symbols move this far when animating in/out.
  • iconLineY: Distance hamburger lines move when opening.
HERO SECTION (Floating images + Cursor repulsion)
Floating Animation
  • minX / maxX: Side-to-side float range.
  • minY / maxY: Up/down float range.
  • minDuration / maxDuration: Speed range of each float cycle.
  • ease: Type of float motion (e.g., "power1.inOut" or "sine.inOut").
Cursor Repulsion
  • maxDistance: How close the cursor must be to trigger movement.
  • force: How much each image moves away when hovered (0.1 = subtle, 0.5 = extreme).
  • duration: How long the repulsion lasts.
  • ease: Motion feel when reacting (e.g., "power4.out" for snappy escape).
BEHIND THE LENS (Paragraph scroll reveal)
SplitType
  • types: "words, chars", "words", "chars" — how text is broken down.
  • tagName: HTML tag used to wrap split parts.
ScrollTrigger
  • start / end: Scroll trigger points for when the animation starts/ends.
  • scrub: Adds smooth scrubbing (1 = very smooth, true = instant sync).
Animation
  • color: Final text color as it animates in.
  • opacity: Start opacity.
  • y: Vertical offset (0 = no movement).
  • duration: Length of reveal animation per character.
  • ease: Animation curve (e.g., "power1.out", "expo.out").
  • stagger: Delay between each character's animation.
OUR WORK SECTION (Hover gallery)
Customization Guide
  • allImageWidth Default width for every image in the gallery. e.g., "6%", "10vw", "80px"
  • tagName: HTML tag used to wrap split parts.
Active Image Width
  • Width for the image currently being hovered.
  • Should be noticeably larger than the default width.
Transition Duration
  • Duration (in seconds) for the width transition animation. e.g., 0.3 = faster, 1.0 = slower.
Transition Ease
  • GSAP easing function to control animation feel. Try "power2.out", "expo.out", "sine.inOut" etc.
SERVICES (Testimonial carousel using Swiper)
Customization Guide
  • allImageWidth Default width for every image in the gallery. e.g., "6%", "10vw", "80px"
  • tagName: HTML tag used to wrap split parts.
Active Image Width
  • Width for the image currently being hovered.
  • Should be noticeably larger than the default width.
Transition Duration
  • Duration (in seconds) for the width transition animation. e.g., 0.3 = faster, 1.0 = slower.
Transition Ease
  • GSAP easing function to control animation feel. Try "power2.out", "expo.out", "sine.inOut" etc.
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").
WHY CHOOSE US (Floating images + text split animation)
Floating Animation
  • xRange / yRange — Control the range of horizontal/vertical floating.
  • durationRange — Controls how slow/fast each float loop is.
  • ease — Type of motion easing ("sine.inOut" works great for natural floating).
plit Text Scroll Animation
  • yOffset — How far each letter animates in from the bottom.
  • triggerStart — When animation should trigger on scroll ("top 80%" = when heading is 80% down the viewport).
  • stagger — Delay between each character's animation.
Image Reveal Animation
  • imageSelector — The image ID or class to reveal.
  • y, opacity, duration, ease — Standard GSAP properties to control scroll-in animation.
- GSAP Documentation 🔗

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.
Made in Webflow