bd-animations
Our in-house animation library built on GSAP and ScrollTrigger. Drop it into any project and add scroll-triggered animations with a single data attribute — no custom JS needed.
Install
Add the following to your <head>:
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/SplitText.min.js"></script>
<script src="path/to/bd-animations.js"></script>
Usage
Add data-bd-animate to any element. It animates on scroll into view.
<h2 data-bd-animate>Fades in</h2>
<h2 data-bd-animate="slide-up">Slides up</h2>
<h2 data-bd-animate="scale-in">Scales in</h2>
Fade & Slide
Fade (default)
This text fades in
Slide Up
This text slides up
Slide Down
This text slides down
Slide Left
This text slides from left
Slide Right
This text slides from right
<h2 data-bd-animate="fade">Fade in</h2>
<h2 data-bd-animate="slide-up">Slide up</h2>
<h2 data-bd-animate="slide-down">Slide down</h2>
<h2 data-bd-animate="slide-left">Slide from left</h2>
<h2 data-bd-animate="slide-right">Slide from right</h2>
Effects
Scale In
Scales from 80% to 100%
Blur In
Blur to clear
Bounce In
Bouncy entrance
Rotate In
Rotates into place
Flip
3D flip effect
Tilt
3D perspective tilt
<h2 data-bd-animate="scale-in">Scale in</h2>
<h2 data-bd-animate="blur-in">Blur in</h2>
<h2 data-bd-animate="bounce-in">Bounce in</h2>
<h2 data-bd-animate="rotate-in">Rotate in</h2>
<h2 data-bd-animate="flip">Flip</h2>
<h2 data-bd-animate="tilt">Tilt</h2>
Text Animations
Use data-text-animate to split and animate text by characters, words, or lines.
Characters
Each character animates
Words
Each word animates in sequence
Lines
This paragraph animates line by line based on where the text wraps in the container.
<h2 data-text-animate="chars">Character animation</h2>
<h2 data-text-animate="words">Word animation</h2>
<p data-text-animate="lines">Line animation</p>
Delays
Use data-bd-delay to stagger elements.
First — no delay
Second — 0.2s
Third — 0.4s
Fourth — 0.6s
<h2 data-bd-animate="slide-up" data-bd-delay="0">No delay</h2>
<h2 data-bd-animate="slide-up" data-bd-delay="0.2">0.2s</h2>
<h2 data-bd-animate="slide-up" data-bd-delay="0.4">0.4s</h2>
<h2 data-bd-animate="slide-up" data-bd-delay="0.6">0.6s</h2>
Special Effects
Neon
Neon glow flicker
Shake
This element shakes
<h2 data-bd-animate="neon">Neon glow</h2>
<h2 data-bd-animate="shake">Shake</h2>
Scrub
Tie animation to scroll position with data-bd-scrub. Without scrub, the animation fires once. With scrub, it plays and reverses as you scroll.
Without scrub (fires once)
This slides up once
With scrub (scroll-tied)
This follows your scroll
<!-- Fires once -->
<h2 data-bd-animate="slide-up">Plays once</h2>
<!-- Scroll-tied -->
<h2 data-bd-animate="slide-up" data-bd-scrub="true">Follows scroll</h2>
<!-- Custom speed (0.1 = slow, 5.0 = fast) -->
<h2 data-bd-animate="slide-up" data-bd-scrub="0.5">Medium scrub</h2>
In-View Positioning
Use data-bd-animate="in-view" with custom start positions via data-bd-from-* attributes.
From below
Starts 80px below
From left
Starts 100px from left
Scaled down
Starts at 50% scale
Combined
Below + left + scaled
<div data-bd-animate="in-view" data-bd-from-y="80">From below</div>
<div data-bd-animate="in-view" data-bd-from-x="-100">From left</div>
<div data-bd-animate="in-view" data-bd-from-scale="0.5">Scaled</div>
<div data-bd-animate="in-view" data-bd-from-y="50" data-bd-from-x="-50" data-bd-from-scale="0.8">Combined</div>
| Attribute | Description |
|---|---|
data-bd-from-y |
Vertical offset ("50" down, "-30" up) |
data-bd-from-x |
Horizontal offset ("100" right, "-50" left) |
data-bd-from-scale |
Starting scale ("0.8" = 80%) |
Only works with data-bd-animate="in-view".
All Animations
| Animation | Value | Description |
|---|---|---|
| Fade | fade or empty |
Default fade in |
| Slide | slide |
Fade + slide up |
| Slide Up | slide-up |
Slide up |
| Slide Down | slide-down |
Slide down |
| Slide Left | slide-left |
Slide from left |
| Slide Right | slide-right |
Slide from right |
| Scale In | scale-in |
Scale 80% to 100% |
| Rotate In | rotate-in |
Rotate -15 deg to 0 |
| Expand Spacing | expand-spacing |
Letter spacing expand |
| Skew | skew |
Skew effect |
| Flip | flip |
3D flip |
| Fade In/Out | fade-in-out |
Smooth fade |
| Blur In | blur-in |
Blur to clear |
| Bounce In | bounce-in |
Bouncy entrance |
| Shake | shake |
Shake effect |
| Flash | flash |
Continuous flash |
| Neon | neon |
Neon glow |
| Tilt | tilt |
3D perspective tilt |
| In View | in-view |
Custom start position |
Text Animations
| Value | Description |
|---|---|
data-text-animate="chars" |
Animate each character |
data-text-animate="words" |
Animate each word |
data-text-animate="lines" |
Animate each line |
data-text-animate="rich-text" |
Animate rich text elements |
data-text-animate="list" |
Animate list items |
Modifiers
| Attribute | Description |
|---|---|
data-bd-delay |
Delay in seconds (e.g. "0.5") |
data-bd-scrub |
Scroll-tied ("true" or "0.1" to "5.0") |
Dependencies
- GSAP + ScrollTrigger + SplitText
- Respects
prefers-reduced-motion - Debounced resize (150ms)
- Duplicate prevention via
data-bd-bound
Legacy
data-text-animate="element" is auto-converted to data-bd-animate="fade".