Dancepad

Getting started
Introduction Installation
Texts
Arc Title Blade Reveal Blended Hover Blur Reading Blur Reveal Counter Decode Hover Decode Reveal Dynamic Copyright Fluid Gradient Highlight Hover Letter Launcher Looping Lines Looping Lines v2 Mousefill Title Proximity Hover Random Letters Scroll Reading Shading Lines Title Swap Hover Swap Reading Text Shimmer Twist Reveal Typed Underline Hover Unfold Hover Unfold Reveal 3D Swap Hover
Buttons
Anyside Button Arrow Button Arrow Button v2 Arrow Button v3 Arrow Icon Crystal Button Glowing Button Layer Button Marquee Button Marquee Button v2 Mask Button Modal Button Prism Button Rainbow Button Ripple Button Ripple Button v2 Ripple Button v3 Shiny Button
Menus
Burger Circular Menu Dock Drawer Dropdown Dropdown megaMenu Dynamic Island Expanding Menu Focus Nav Gooey Nav Morphing Nav Multi Offcanvas Menu Offcanvas Menu Overlay Menu Sticky Header
Medias
Before/After Image Image Hotspots Image Reveal Parallax
Cursors
Cursor Cursor Slide Cursor Trail Designer Cursor
Sliders
Infinite Slider Parallax Slider
Backgrounds
Border Beam Fluids Gradiently Grainy Interactive Lines Particles Physics Spotlight Spotlight v2 Tiles Tiles v2
Cores
Accordion Back to Top Click and Copy Decode Card Distorsion Tabs Flipbox Glitchy Glowing Card Horizontal Marquee Interactive Divider Inverted Corner Mask Hover Motion Divider Observer Parallax Hover Progress Bar Progress Bar v2 QR Code Scrollbar Smooth Scroll Stacking Cards Tabs Tippy Toast Toolteam Pixels Shimmer Card Vertical Marquee
Jose Tamu
February 18, 2025 /
Beginner

Swap Reading

Demo

Content tab

Animation group

Duration
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

ScrollTrigger group

Swap Reading animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: determines the end of the animation.
Scroller: the element that will act as the scrolling viewport. It is the body by default.

Style tab

There are 4 groups available to style Scroll Reading: Margin, Padding, Typography and Dimensions (a width for the element and a max-width for the element's paragraph). If you need to apply additional styles, you can do so at the Settings Tab.