Instructions

Counter animation

How it works

This animation creates a counting effect by animating numbers from 0 to a specified target value when the element enters the viewport.

The animation targets elements with the attribute data-counter. Each element reads its target number directly from the attribute value and smoothly increments the number using GSAP.

The animation is triggered using ScrollTrigger when the element reaches 85% of the viewport.

Customization options

Use the attribute data-counter to define the target number.
- Example: data-counter="60"
Adjust the animation duration to control counting speed.
- Default: 2s
Customize the easing for different motion styles.
- power1.out → smooth deceleration
- power2.out → softer finish
Change the ScrollTrigger start point.
- Default: "top 85%"
- Earlier trigger: "top 95%"
- Later trigger: "top 60%"
Use snap to create whole-number counting instead of decimals.
Add prefixes or suffixes using additional text elements.
- Example: 4.9%
- Example: 150K

Features

Smooth animated number counting effect
Triggered on scroll using ScrollTrigger
Automatically reads values from attributes
Supports customizable speed and trigger position
Lightweight and performance-friendly
Perfect for stats, achievements, and metrics sections

1
2document.addEventListener("DOMContentLoaded", () => {
3  gsap.registerPlugin(ScrollTrigger);
4 
5  const counters = document.querySelectorAll("[data-counter]");
6 
7  counters.forEach((counter) => {
8    // 1. Get the target number from data-counter (e.g., "98")
9    const targetNumber = parseInt(counter.getAttribute("data-counter"), 10) || 0;
10    
11    // 2. Get the symbol from data-suffix (e.g., "%"). Default to empty string if none.
12    const suffix = counter.getAttribute("data-suffix") || "";
13
14    // 3. Create a clean proxy object for GSAP to animate
15    const obj = { value: 0 };
16 
17    gsap.to(obj, {
18      value: targetNumber,
19      duration: 2,
20      ease: "power1.out",
21      
22      scrollTrigger: {
23        trigger: counter,
24        start: "top 85%",
25        toggleActions: "play none none none",
26      },
27      
28      onUpdate: function () {
29        // 4. Force string concatenation explicitly
30        counter.textContent = String(Math.floor(obj.value)) + String(suffix);
31      }
32    });
33  });
34});
35

FAQ accordion animation

How it works

This interaction creates a smooth accordion animation for FAQ sections, allowing users to expand and collapse answers with a single click.

The animation targets FAQ elements using custom attributes and synchronizes the answer reveal with a rotating icon for a polished user experience.

The FAQ wrapper uses the attribute click="faq".
The clickable icon uses the attribute faq="faq-icon".
The answer container uses the attribute faq="faq-text".
Clicking an FAQ item expands its answer while rotating the icon from 0° to 90°.
Clicking the item again collapses the answer and returns the icon to its original position.

Customization options

Use the attribute click="faq" to define each FAQ accordion item.
Use the attribute faq="faq-icon" for the rotating indicator.
- Default rotation: 0° → 90°
- You can change the rotation angle to match your design.
Use the attribute faq="faq-text" for the collapsible content.
- Default animation: height: 0 → auto
- You can also animate opacity for a softer reveal.
Adjust the animation duration.
- Default: 0.5s
- Lower value → faster interaction
- Higher value → smoother transition
Modify the easing style.
- power2.out → smooth and responsive
- power3.out → softer finish
- none → linear animation

Features

Smooth accordion open and close animation
Animated icon rotation from 0° to 90°
Expands answer height from 0 to auto
Supports multiple FAQ items using reusable attributes
Clean and lightweight GSAP implementation
Easy to customize timing, easing, and rotation angle
Improves readability and user experience for FAQ sections

Marquee

How it works

This animation creates a continuous horizontal scrolling effect by moving elements from their original position to the left across the screen.

The animation targets elements with the attribute pageloadd = "marquee-train" and transitions the X position from 0% to -100%, creating a seamless marquee movement commonly used for logos, announcements, or looping text sections.

Customization options

Use the attribute pageloadd = "marquee-train" to apply the animation.
Adjust the animation speed by changing the duration.
- Lower duration → faster movement
- Higher duration → slower movement
Modify the .
- Higher value→ elements begin further below
- Lower value→ subtler movement
Enable infinite looping for continuous movement.
Add linear easing for a consistent scrolling speed.
- Recommended: ease: "none"
Combine with duplicated content for a seamless infinite marquee effect.

Features

Smooth infinite horizontal scrolling animation
Ideal for logo strips, text banners, and announcements
Fully customizable speed and direction
Lightweight and performance-friendly
Creates dynamic movement and visual engagement

Appearance animation

How it works

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

The animation targets elements with the attribute data="heading" and transitions their opacity from 0 to 1 while animating the Y position from 2.5rem to 0rem. Each element is triggered individually as it scrolls into view, making it ideal for headings, paragraphs, cards, and other content sections.

Customization options

Use the attribute data="heading" to apply the animation.
Adjust the animation speed by changing the duration.
- Lower duration → faster movement
- Higher duration → slower movement
Modify the movement direction by changing the X values.
- Higher value → elements begin further below
- Lower value → subtler movement
Change the easing by modifying the ease property.
- Recommended: power2.out for a smooth and natural reveal.
control the stagger effect by adjusting the delay.
- Lower delay → elements 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 upward reveal animation
Individually triggered as each element enters the viewport
Perfect for headings, paragraphs, cards, and content sections
Fully customizable speed, delay, and movement distance
Lightweight and performance-friendly using GSAP ScrollTrigger
‍Creates a polished and engaging scrolling experience

Page smooth scroll

How it works

This setup creates a smooth scrolling experience across the entire website using Lenis, while keeping it fully synced with GSAP animations.

The script initializes Lenis to control the page’s scroll behavior and replaces the default browser scrolling with a smoother, eased motion. It also integrates with GSAP’s ticker and ScrollTrigger so all scroll-based animations remain perfectly in sync with the smooth scrolling system.

Customization options

Adjust global smoothness by changing the lerp value.
- Lower value (e.g., 0.05) → smoother, slower easing
- Higher value (e.g., 0.2) → more responsive, less smooth
Control scroll intensity with wheelMultiplier.
- Lower value → reduced scroll speed
- Higher value → faster scrolling
Toggle infinite scrolling using infinite.
- false → normal page scroll
- true → continuous loop scroll effect
Modify GSAP sync behavior via ScrollTrigger.update.
Adjust frame performance using gsap.ticker.lagSmoothing(0) for smoother animations.
Fine-tune RAF behavior for advanced performance control if needed.

Features

Smooth, natural page scrolling experience
Fully integrated with GSAP ScrollTrigger
High-performance requestAnimationFrame-based engine
Customizable scroll responsiveness and easing
Improves perceived performance and UX quality
Ideal for modern landing pages, portfolios, and interactive websites

Testimonials slider

How it works

This animation creates an infinite looping testimonial slider with autoplay, hover pause, and seamless edge looping.

The script targets a wrapper element [wrapper] containing slides [data-slide] and duplicates them on both ends to create a continuous loop effect without visible gaps. The slider then shifts horizontally using GSAP based on a current index value.

Autoplay automatically advances the slider at a fixed interval, while user interaction (hover) pauses the movement. On resize, the slider recalculates and maintains correct positioning to ensure consistent layout behavior across all screen sizes.

‍

Customization options

Use attribute [wrapper] for the slider container.
Use [data-slide] for each testimonial slide.
Adjust autoplay speed via setInterval duration.
- Lower value → faster slide transition
- Higher value → slower movement
Modify transition speed using GSAP duration.
- Recommended: 0.6–0.9 for smooth motion
Change easing with ease: "power3.inOut" for natural slide motion.
Adjust visible index start using current = 3.
- Controls initial centered slide position
Modify loop boundaries:
- current >= 6 → right reset point
- current <= 2 → left reset point
Control autoplay delay via 2500 interval value.
Enable/disable autoplay by calling startAutoplay() or stopAutoplay()

‍

Features

Infinite looping testimonial slider (no visible gaps)
Auto-play with smooth GSAP transitions
Hover-to-pause interaction for better UX
Responsive recalculation on window resize
Seamless left/right loop handling
Lightweight custom slider without external libraries
Ideal for testimonials, reviews, and logo/carousel sections