--- title: "bd-animations" subtitle: "In-house animation system built on GSAP and ScrollTrigger" description: "Documentation for bd-animations — the ByDefault reusable animation library for any project. Covers data attributes, animation types, text splitting, and configuration." author: "Studio" section: "Website" layer: "app" subsection: "Interactions" order: 1 --- # 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 ``: ```html ``` ### Usage Add `data-bd-animate` to any element. It animates on scroll into view. ```html

Fades in

Slides up

Scales in

``` --- ## 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

```html

Fade in

Slide up

Slide down

Slide from left

Slide from right

``` --- ## 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

```html

Scale in

Blur in

Bounce in

Rotate in

Flip

Tilt

``` --- ## 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.

```html

Character animation

Word animation

Line animation

``` --- ## Delays Use `data-bd-delay` to stagger elements.

First — no delay

Second — 0.2s

Third — 0.4s

Fourth — 0.6s

```html

No delay

0.2s

0.4s

0.6s

``` --- ## Special Effects

Neon

Neon glow flicker

Shake

This element shakes

```html

Neon glow

Shake

``` --- ## 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

```html

Plays once

Follows scroll

Medium scrub

``` --- ## 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

```html

From below

From left

Scaled

Combined

``` | 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"`.