Every attribute, class, and default value for the HB GSAP FX animation library.
Getting Started
Feature
Data Attribute
Class
Default
Notes
Trigger
n/a
hb-gsap-trigger
n/a
Required on every animated element
Disable on mobile
data-style="… mobile:off"
n/a
enabled
Skips animation on screens ≤ 768px. Add as a space-separated token inside data-style.
Animation Effects
Apply via data-style="effect-name"or the equivalent class. Multiple effects can be combined in data-style with spaces (e.g. data-style="fade-in slide-in-up"). Class usage applies one effect per class.
Effect
data-style value
Class
Animates
Notes
Fade In
fade-in
hb-fade-in
opacity 0 → 1
Scale Up
scale-up
hb-scale-up
scale 0.6 → 1
Override start scale with data-scale
Scale Down
scale-down
hb-scale-down
scale 1.4 → 1
Override start scale with data-scale
Slide In Left
slide-in-left
hb-slide-in-left
x −10 → 0
Override distance with data-distance or data-distance-x
Slide In Right
slide-in-right
hb-slide-in-right
x 10 → 0
Override distance with data-distance or data-distance-x
Slide In Up
slide-in-up
hb-slide-in-up
y 10 → 0
Override distance with data-distance or data-distance-y
Slide In Down
slide-in-down
hb-slide-in-down
y −10 → 0
Override distance with data-distance or data-distance-y
Rotate
rotate
hb-rotate
rotation −90° + opacity 0 → 0° + opacity 1
Blur In
blur-in
hb-blur-in
blur(8px) + opacity 0 → blur(0) + opacity 1
Override blur amount with data-blur or hb-blur-{n}
Animation Options
Option
Data Attribute
Class
Default
Notes
Duration
data-duration="0.8"
n/a
0.6
Seconds
Delay
data-delay="0.2"
n/a
0
Seconds before animation starts
Stagger
data-stagger="0.1"
n/a
0.05
Seconds between each split unit (chars/words/lines)
Easing
data-ease="power4.out"
hb-ease-power4-out
power2.out
Any GSAP ease. In class form, replace . with - (e.g. hb-ease-elastic-out)
