Instructions

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 data-marquee 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 data-marquee 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.
  • 0% → -100% → left scroll
  • 0% → 100% → right scroll
• 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

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="150"
• 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: +150
  • 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

Stagger Card Reveal

How it works

This animation reveals cards one by one using a staggered fade-up effect.

The animation targets elements with the attribute data="card-v2" and separates cards into two groups:

• Cards already visible in the viewport animate immediately on page load.
• Remaining cards animate as they enter the viewport while scrolling.

Each card transitions from lower opacity and a downward Y offset to its original position, creating a smooth layered reveal effect.

‍

Customization options

• Use the attribute data="card-v2" to apply the animation.
• Adjust the stagger value to control the delay between cards.
  • Default: 0.3
  • Lower value → faster sequence
  • Higher value → more dramatic reveal
• Customize the Y movement distance.
  • Default: 80
  • Smaller values create subtler motion.
• Modify the animation duration.
  • Default: 0.8s
• Change the easing style for different motion feels.
  • power2.out → smooth and modern
  • power3.out → softer finish
• Adjust the ScrollTrigger start position.
  • Default: "top 85%"
  • Earlier trigger: "top 95%"
  • Later trigger: "top 70%"

‍

Features

• Smooth staggered card entrance animation
• Instantly animates visible cards on page load
• Reveals additional cards on scroll
• Creates depth and visual rhythm in layouts
• Fully customizable timing, spacing, and movement
• Lightweight and performance-friendly for large grids

FAQ

How it works

This animation creates a smooth accordion effect by expanding and collapsing FAQ answers.

The animation targets elements with the attribute data-answer and transitions the height from 0px to auto, allowing the content to smoothly reveal itself when triggered.

This effect is commonly used for FAQ sections, accordions, and expandable content areas.

‍

Customization options

• Use the attribute data-answer to apply the animation.
• Animate the height from:
  • 0px → hidden state
  • auto → fully expanded state
• Adjust the animation duration to control expansion speed.
  • Default: 0.5s
• Customize easing styles for different motion feels.
  • power1.out → natural motion
  • power2.out → smoother expansion
• Add opacity animation for a softer reveal effect.
• Combine with rotation animations for FAQ icons or plus/minus indicators.
• Enable only one active accordion item or allow multiple open items.

‍

Features

• Smooth expandable accordion animation
• Automatically adapts to dynamic content height
• Ideal for FAQ sections and collapsible content
• Fully customizable duration and easing
• Lightweight and performance-friendly
• Creates a cleaner and more interactive user experience