Instructions

Smooth scroll animation

How it works

This setup adds smooth, fluid scrolling to the website using Lenis while keeping GSAP ScrollTrigger animations synchronized with the smooth scroll position.

Lenis handles the scrolling behavior, while ScrollTrigger updates continuously through the GSAP ticker. The setup also refreshes Lenis and ScrollTrigger when the page loads, resizes, fonts finish loading, or the page height changes, helping maintain accurate scroll-based animations across different layouts and screen sizes.

Customization options

• Adjust the smoothness by changing the lerp value.
  • Lower value → smoother, slower interpolation
  • Higher value → more responsive scrolling
• Control scroll sensitivity with the wheelMultiplier.
  • Lower value → slower wheel movement
  • Higher value → faster wheel movement
• Enable or disable smooth wheel scrolling with smoothWheel.
• Set infinite to true to enable continuous looping scroll behavior.
• Modify the refresh timing to control when Lenis and ScrollTrigger recalculate page dimensions.
• Adjust the resizeObserver behavior if your page contains dynamically changing content.

Features

• Smooth and fluid scrolling powered by Lenis
• Fully synchronized with GSAP ScrollTrigger
• Automatically recalculates scroll positions and page dimensions
• Refreshes after page load, resize, and font loading
• Detects dynamic page-height changes using ResizeObserver
• Improves reliability of scroll-based animations
• Lightweight and performance-friendly setup
• Suitable for Webflow pages with GSAP scroll animations

Image appear animation

How it works

This animation reveals images as they enter the viewport by smoothly fading them in while scaling them down to their original size.

The animation targets elements with the attribute image-appear="page-load" and transitions their opacity from 0 to 1 while scaling from 1.2 to 1. Each image is triggered individually as it enters the viewport, creating a smooth and polished reveal effect for banners, featured images, and visual sections.

Customization options

• Use the attribute image-appear="page-load" to apply the animation.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster reveal
  • Higher duration → slower reveal
• Modify the starting scale by changing the initial scale value.
  • Higher value → stronger zoom-out effect
  • Lower value → subtler zoom effect
• Change the easing by modifying the ease property.
  • Recommended: power3.out for a smooth and natural transition
• Control the image sequence by adjusting the delay.
  • Lower delay → images animate closer together
  • Higher delay → more spacing between animations
• Change when the animation starts by modifying the ScrollTrigger start value.
  • Earlier start → animation begins sooner
  • Later start → animation begins closer to the viewport

Features

• Smooth fade and zoom reveal animation
• Individually triggered as images enter the viewport
• Creates a subtle depth effect with scale animation
• Fully customizable speed, scale, easing, and delay
• Ideal for hero banners, featured images, galleries, and visual sections
• Lightweight and performance-friendly using GSAP ScrollTrigger
• Adds a polished entrance effect to image-based content

Counter animation

How it works

This animation smoothly counts numerical values from 0 to the target number as they enter the viewport.

The animation targets elements with the attribute data-counter, such as data-counter="250+". It automatically detects the target value and preserves any suffix, while formatting larger numbers with commas. The counter animates only once when it reaches the viewport, creating an engaging effect for statistics, metrics, and key business figures.

Customization options

• Use the attribute data-counter="250+" to apply the animation.
• Set the target number directly inside the attribute.
  • Example: data-counter="1,500+"
• Add a suffix such as +, %, or K after the number.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster count
  • Higher duration → slower count
• Change the easing by modifying the ease property.
  • Recommended: power1.out for a smooth counting effect
• Change when the counter starts by modifying the ScrollTrigger start value.
  • Earlier start → counter begins sooner
  • Later start → counter begins closer to the viewport

Features

• Smooth number counting animation
• Automatically detects target values and suffixes
• Supports comma-formatted numbers
• Animates once when entering the viewport
• Fully customizable speed, easing, and trigger position
• Ideal for statistics, achievements, metrics, and business results
• Lightweight and performance-friendly using GSAP ScrollTrigger

Text reveal animation

How it works

This animation reveals text elements as they enter the viewport by smoothly fading them in while moving them upward into their original position.

The animation targets elements with the attribute data-animate="text" and transitions their opacity from 0 to 1 while moving them from y: 80 to y: 0. Each text element is triggered individually when it enters the viewport, creating a clean and polished reveal effect for headings, paragraphs, and content sections.

Customization options

• Use the attribute data-animate="text" to apply the animation.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster reveal
  • Higher duration → slower reveal
• Modify the starting position by changing the y value.
  • Higher value → stronger upward movement
  • Lower value → subtler movement
• Change the easing by modifying the ease property.
  • Recommended: power2.out for a smooth and natural transition
• Change when the animation starts by modifying the ScrollTrigger start value.
  • Earlier start → animation begins sooner
  • Later start → animation begins closer to the viewport

Features

• Smooth fade and upward reveal animation
• Individually triggered as text enters the viewport
• Creates a subtle motion effect without being distracting
• Fully customizable speed, movement, and easing
• Ideal for headings, paragraphs, labels, and content sections
• Animates only once for a clean viewing experience
• Lightweight and performance-friendly using GSAP ScrollTrigger

Hero appear animation

How it works

This animation reveals hero elements with a smooth fade and upward movement. Elements already visible when the page loads animate immediately, while elements outside the viewport are triggered as they enter the screen.

The animation targets elements with the attribute data="hero-appear" and transitions their opacity from 0 to 1 while moving them from y: 80 to their original position. Visible elements animate with a staggered sequence, while hidden elements animate individually on scroll.

Customization options

• Use the attribute data="hero-appear" to apply the animation.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster reveal
  • Higher duration → slower reveal
• Modify the starting position by changing the y value.
  • Higher value → stronger upward movement
  • Lower value → subtler movement
• Control the stagger between visible elements by changing the stagger.
  • Lower value → elements appear closer together
  • Higher value → more spacing between animations
• Change the easing by modifying the ease property.
  • Recommended: power2.out for a smooth and natural transition
• Change when hidden elements start by modifying the ScrollTrigger start value.
  • Earlier start → animation begins sooner
  • Later start → animation begins closer to the viewport

Features

• Smooth fade and upward reveal animation
• Automatically detects elements already visible on page load
• Staggered animation for visible hero elements
• Scroll-triggered animation for elements below the viewport
• Animates each hidden element only once
• Fully customizable speed, movement, stagger, and easing
• Ideal for hero content, cards, banners, and featured sections
• Lightweight and performance-friendly using GSAP ScrollTrigger

Hero appear animation

How it works

This animation reveals hero elements with a smooth fade and upward movement. Elements already visible when the page loads animate immediately, while elements outside the viewport are triggered as they enter the screen.

The animation targets elements with the attribute data="hero-appear" and transitions their opacity from 0 to 1 while moving them from y: 80 to their original position. Visible elements animate with a staggered sequence, while hidden elements animate individually on scroll.

Customization options

• Use the attribute data="hero-appear" to apply the animation.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster reveal
  • Higher duration → slower reveal
• Modify the starting position by changing the y value.
  • Higher value → stronger upward movement
  • Lower value → subtler movement
• Control the stagger between visible elements by changing the stagger.
  • Lower value → elements appear closer together
  • Higher value → more spacing between animations
• Change the easing by modifying the ease property.
  • Recommended: power2.out for a smooth and natural transition
• Change when hidden elements start by modifying the ScrollTrigger start value.
  • Earlier start → animation begins sooner
  • Later start → animation begins closer to the viewport

Features

• Smooth fade and upward reveal animation
• Automatically detects elements already visible on page load
• Staggered animation for visible hero elements
• Scroll-triggered animation for elements below the viewport
• Animates each hidden element only once
• Fully customizable speed, movement, stagger, and easing
• Ideal for hero content, cards, banners, and featured sections
• Lightweight and performance-friendly using GSAP ScrollTrigger

Premium content slider

How it works

This slider creates a polished transition between content cards and images using directional movement, fading, scaling, and subtle rotation.

The slider targets cards and images using the approach-v1 attributes and switches between three content slides through dedicated next and previous buttons. Text moves in the direction of navigation, while images transition quickly with opacity, scale, and subtle Z-axis rotation for a premium visual effect.

Customization options

• Use approach-v1="card-one", card-two, and card-three for the content cards.
• Use approach-v1="image-one", image-two, and image-three for the corresponding images.
• Use click="approach-v1-button-next" and click="approach-v1-button-previous" for navigation controls.
• Adjust text transition speed by changing the card duration.
  • Lower duration → faster transition
  • Higher duration → slower transition
• Modify the text movement by changing the cardEnterY and cardExitY values.
  • Higher value → stronger directional movement
  • Lower value → subtler movement
• Adjust the image zoom effect using the scale values.
  • Higher value → stronger zoom effect
  • Lower value → subtler zoom effect
• Modify the image rotation by changing the rotationZ values.
  • Higher value → more noticeable rotation
  • Lower value → more subtle rotation
• Change the easing by modifying the ease properties.
  • power3.out → smooth and polished entrance
  • power2.inOut → balanced image transition
• Adjust the timing positions in the timeline to control how text and images overlap during transitions.

Features

• Premium content slider with directional transitions
• Smooth text fade, movement, and scale animation
• Fast image fade with scale and subtle Z-axis rotation
• Next and previous navigation controls
• Supports looping from the last slide to the first
• Prevents overlapping animations while transitioning
• Automatically resets previous slides after each transition
• Built with GSAP Core for a lightweight setup
• Ideal for approach sections, services, case studies, and featured content

Heading appearance animation

How it works

This animation reveals headings letter-by-letter with a smooth fade and blur effect as they enter the viewport.

The animation targets elements with the attribute appear="heading". Each heading is split into individual characters while keeping words together for natural text wrapping. Characters transition from opacity: 0 and blur(20px) to full visibility and blur(0px). Animation speed automatically adjusts based on the heading length, making longer headings appear faster.

Customization options

• Use the attribute appear="heading" to apply the animation.
• Adjust the character threshold by changing the characterCount value.
  • Lower value → more headings use the faster animation
  • Higher value → fewer headings use the faster animation
• Adjust the animation speed by changing the duration.
  • Lower duration → faster reveal
  • Higher duration → slower reveal
• Control the spacing between letters with the stagger.
  • Lower value → characters appear closer together
  • Higher value → more noticeable letter-by-letter effect
• Modify the starting blur by changing the filter value.
  • Higher blur → stronger reveal effect
  • Lower blur → subtler effect
• Change the easing by modifying the ease property.
  • Recommended: power2.out for a smooth and natural transition
• Change when the animation starts by modifying the ScrollTrigger start value.
  • Earlier start → animation begins sooner
  • Later start → animation begins closer to the viewport

Features

• Letter-by-letter heading reveal
• Smooth blur-to-sharp transition
• Automatically adjusts speed based on heading length
• Keeps words together to preserve natural text wrapping
• Animates headings only once when triggered
• Fully customizable speed, stagger, blur, and easing
• Ideal for hero headings, section titles, and featured typography
• Lightweight and performance-friendly using GSAP ScrollTrigger

Paragraph appearance animation

How it works

This animation reveals paragraph text line-by-line as it enters the viewport using GSAP SplitText.

The animation targets elements with the attribute appear="paragraph" and splits each paragraph into individual lines. Each line transitions from opacity: 0 and y: 50 to full visibility and its original position, creating a smooth and readable text reveal effect.

The animation also respects the user's reduced-motion preference and falls back to static text when SplitText is unavailable.

Customization options

• Use the attribute appear="paragraph" to apply the animation.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster reveal
  • Higher duration → slower reveal
• Modify the starting position by changing the y value.
  • Higher value → stronger upward movement
  • Lower value → subtler movement
• Control the spacing between lines with the stagger.
  • Lower value → lines appear closer together
  • Higher value → more noticeable line-by-line effect
• Change the easing by modifying the ease property.
  • Recommended: power2.out for a smooth and natural transition
• Change when the animation starts by modifying the ScrollTrigger start value.
  • Earlier start → animation begins sooner
  • Later start → animation begins closer to the viewport

Features

• Smooth line-by-line paragraph reveal
• Powered by GSAP SplitText
• Fade and upward movement for each text line
• Automatically adapts when text wraps into different lines
• Supports reduced-motion accessibility preferences
• Includes a fallback when SplitText is unavailable
• Fully customizable speed, movement, stagger, and easing
• Ideal for paragraphs, descriptions, and supporting content
• Lightweight and performance-friendly using GSAP ScrollTrigger

Why choose us hover FAQ

How it works

This interaction creates an interactive hover-based FAQ where hovering over a card expands its corresponding answer while updating the card, heading, and paragraph colors.

The animation targets cards using the hover="why-choose-us-v1-card-*" attributes and connects each card to its matching answer using hover="answer-*". The first card and answer are open by default, while hovering over another card smoothly closes the previous answer, resets its styling, and activates the selected card.

Customization options

• Use hover="why-choose-us-v1-card-one" for the first card, followed by card-two, card-three, and so on.
• Use matching hover="answer-one", answer-two, answer-three, and so on for the answers.
• Adjust the expand/collapse speed by changing the duration.
  • Lower duration → faster transition
  • Higher duration → slower transition
• Change the easing by modifying the ease property.
  • Recommended: power2.inOut for a smooth and balanced transition
• Modify the active card background by changing the backgroundColor value.
• Change the active heading and paragraph colors by modifying their color values.
• Adjust the default card styling through the original Webflow styles, which are automatically stored and restored when another card becomes active.

Features

• Smooth hover-based FAQ interaction
• Expands and collapses answers automatically
• Keeps one answer open at a time
• Updates card, heading, and paragraph colors on hover
• First card and answer are active by default
• Automatically restores each card's original styling
• Smooth height animation using GSAP
• Prevents conflicting animations with tween overwriting
• Ideal for FAQ sections, feature lists, service benefits, and comparison cards
• Lightweight and performance-friendly using GSAP Core

Image reveal animation

How it works

This animation reveals images as they enter the viewport by sliding an overlay upward while simultaneously scaling the image down to its natural size.

The animation targets elements with the attribute data="image" and pairs them with a corresponding data="overlay" element inside the same wrapper. When the image enters the viewport, the overlay moves from 0% to 100% while the image scales from 1.4 to 1, creating a smooth and polished reveal effect.

Customization options

• Use the attribute data="image" on the image element to apply the animation.
• Use data="overlay" on the overlay element inside the image wrapper.
• Adjust the overlay reveal speed by changing its duration.
  • Lower duration → faster reveal
  • Higher duration → slower reveal
• Modify the image zoom effect by changing the starting scale value.
  • Higher value → stronger zoom-out effect
  • Lower value → subtler zoom effect
• Adjust the image animation speed by changing its duration.
  • Lower duration → faster scale transition
  • Higher duration → slower scale transition
• Change the easing by modifying the ease property.
  • Recommended: power2.inOut for the overlay
  • Recommended: power2.out for the image
• Change when the animation starts by modifying the ScrollTrigger start value.
  • Earlier start → animation begins sooner
  • Later start → animation begins closer to the viewport

Features

• Smooth overlay-based image reveal
• Image scales from 1.4 to its natural size
• Overlay and image animate simultaneously
• Individually triggered as images enter the viewport
• Animates only once per image
• Fully customizable speed, scale, easing, and trigger position
• Ideal for hero banners, project images, galleries, and visual sections
• Lightweight and performance-friendly using GSAP ScrollTrigger

Home V3 hero banner slider

How it works

This animation creates an automatic hero banner slider that synchronizes image transitions, word-by-word text reveals, and progress lines.

The slider targets hero elements using the home-v3 attributes. Each progress line fills from left to right over 3 seconds, then the corresponding image and text transition to the next slide. Images combine a clip-path reveal, scale, horizontal movement, and subtle Z-axis rotation, while text enters word-by-word for a premium transition effect. After the final slide, all progress lines reset and the sequence starts again.

Customization options

• Use home-v3="image-one", image-two, and image-three for hero images.
• Use home-v3="text-one", text-two, and text-three for corresponding text.
• Use home-v3="line-one", line-two, and line-three for progress lines.
• Adjust the slide timing by changing lineDuration.
  • Lower value → faster slide changes
  • Higher value → longer slide duration
• Adjust the image transition speed with imageDuration.
  • Lower value → faster image transition
  • Higher value → slower transition
• Adjust the text animation speed with textDuration.
  • Lower value → faster word reveal
  • Higher value → slower reveal
• Modify the image zoom effect by changing the scale values.
  • Higher value → stronger zoom effect
  • Lower value → subtler zoom effect
• Adjust the image rotation by changing the rotationZ values.
  • Higher value → more noticeable rotation
  • Lower value → subtler rotation
• Modify the word spacing effect using the stagger values.
  • Lower value → words appear closer together
  • Higher value → more pronounced word-by-word reveal
• Change the image movement by adjusting the xPercent values.
• Modify the image reveal direction by adjusting the clipPath values.
• Change the easing using the ease properties.
  • power3.out → smooth image entrance
  • power3.inOut → balanced image transition
  • power4.out → polished text reveal

Features

• Automatic three-slide hero banner rotation
• Synchronized progress lines, images, and text
• 3-second linear progress animation per slide
• Word-by-word text reveal
• Smooth image clip-path transition
• Image scale and subtle Z-axis rotation
• Directional horizontal image movement
• Progress lines remain filled until the sequence resets
• Automatically loops back to the first slide
• Built with GSAP for smooth and performance-friendly animation
• Ideal for premium hero banners and high-impact landing sections