8
Button Effects
Ripples, Trails, Skews, and Magnets
19
Text Animations
Staggers, Blurs, 3D Flips, and Bounces
15
Paragraph Effects
Multi-line pivot reveals and skew slides
15
Other Transitions
Draggables, Image Masks, and 3D Tilts
Getting Started in 3 Steps
1
Include GSAP Core, ScrollTrigger, SplitText, and Draggable on your page:
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
2
Load Gfluo library stylesheet and script entry point:
<link rel="stylesheet" href="/style.css">
<script src="/gfluo-pro.min.js"></script>
3
Mark elements with the data-gsap attribute and let Gfluo animate them automatically
on load or scroll:
<h1 data-gsap="txt.13" gfluo-trigger="scroll">Glitch Text</h1>
Global Rules Builder
Define global rules to map specific CSS selectors automatically to Gfluo animations on page load.
0.8s
0s