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.
Before Publishing:
Delete unused sections/pages, clean up CSS classes, clean up unused interactions and delete unused components.
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.
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.
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.