PHPackages                             humanmade/hm-gsap-animations - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. humanmade/hm-gsap-animations

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

humanmade/hm-gsap-animations
============================

GSAP animation controls for the WordPress block editor.

1.0.0(2w ago)00GPL-2.0-or-laterJavaScriptPHP >=7.4CI passing

Since May 20Pushed 2w agoCompare

[ Source](https://github.com/humanmade/hm-gsap-animations)[ Packagist](https://packagist.org/packages/humanmade/hm-gsap-animations)[ RSS](/packages/humanmade-hm-gsap-animations/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)DependenciesVersions (3)Used By (0)

HM GSAP Animations
==================

[](#hm-gsap-animations)

    Screen.Recording.2026-05-19.at.11.13.33.mov    Adds GSAP animation controls to core WordPress blocks via the Gutenberg block editor. Editors pick animation, mode, trigger, timing, and stagger directly from the Inspector panel — no code required.

Inspired by [C9 Animation for Blocks](https://c9.covertnine.com/c9-animation-plugin/) (scrub mode, keyframe markers) and [Counting Number Block](https://wordpress.org/plugins/counting-number-block/) (count-up, animate-once, reduced motion).

---

How it works
------------

[](#how-it-works)

1. **Editor JS** (`src/editor/`) — uses `addFilter` to inject a "GSAP Animation" panel into the Inspector sidebar of every supported block.
2. **Block attributes** — all GSAP settings are saved as block attributes in the post content.
3. **PHP `render_block` filter** — reads saved attributes and injects `data-gsap-*` HTML attributes into the block's outermost element.
4. **Frontend JS** (`src/frontend/`) — queries `[data-gsap-animation]` elements and initialises GSAP tweens, using `ScrollTrigger` where needed.

---

Animation modes
---------------

[](#animation-modes)

### Transition (default)

[](#transition-default)

Plays once when the element enters the viewport. Like a CSS animation — choose *On Scroll* or *On Page Load*.

### Scroll Scrub (C9-style)

[](#scroll-scrub-c9-style)

The animation progress is tied 1-to-1 to the scroll position between **Start** and **End** keyframes. Plays forward while scrolling down, backward while scrolling up. Duration and easing don't apply — scroll speed controls the pace.

---

Available animations
--------------------

[](#available-animations)

ValueDescription`fade-in`Fade from transparent`fade-up`Fade + slide up`fade-down`Fade + slide down`fade-left`Fade + slide from right`fade-right`Fade + slide from left`zoom-in`Scale up from 85% + fade`zoom-out`Scale down from 115% + fade`flip-x`3D horizontal flip`flip-y`3D vertical vertical flip`count-up`Counts a number from 0 to the block's value *(heading + paragraph only)*`parallax-background`Background image moves at a different speed than the scroll *(cover, group, column, media-text)*`split-words`Each word enters individually with stagger *(heading + paragraph only)*`split-chars`Each character enters individually with stagger *(heading + paragraph only)*`hover`Plays on mouseenter, reverses on mouseleave. Skipped on touch devices.### Count-up

[](#count-up)

Inspired by [Counting Number Block](https://wordpress.org/plugins/counting-number-block/). Finds the first number in the block's text and animates it from 0, preserving any prefix/suffix text (e.g. `"Over 5,000 clients"` → `"Over 0 clients"` → `"Over 5,000 clients"`).

### Hover effect

[](#hover-effect)

Creates a paused GSAP Timeline that `.play()`s on `mouseenter` and `.reverse()`s on `mouseleave`. Using a timeline (instead of two separate tweens) means the reverse always mirrors the exact forward motion — even if the user moves out before the animation finishes.

EffectWhat it does`lift`Translates up + adds subtle box-shadow`grow`Scales up to 1.05`shrink`Scales down to 0.95`tilt`3D rotation (rotateY + rotateX)`brighten`CSS `brightness(1.2)` filter`dim`CSS `brightness(0.75)` + slight opacity**Mobile fallback:** uses `window.matchMedia('(hover: hover)')` — a CSS media query that returns `true` only on devices with a pointer capable of hovering (mouse, trackpad). On touch-only screens it skips the animation entirely instead of attaching broken listeners.

### Split text

[](#split-text)

Uses [Splitting.js](https://splitting.js.org/) to wrap each word or character in a `` **at runtime on the frontend only** — the saved HTML is never modified, so there is no conflict with the block editor or with React. Supports the same trigger/stagger/ease controls as other animations.

> **Limitation:** character splitting (`split-chars`) across nested HTML tags (e.g. `bold`) may produce unexpected results. Word splitting handles nested tags correctly.

### Parallax background

[](#parallax-background)

For `core/cover`: animates the inner ``/`` via `yPercent`. For blocks with a CSS `background-image` (group, column): animates `backgroundPositionY`. Both use GSAP ScrollTrigger scrub.

---

Inspector panel controls
------------------------

[](#inspector-panel-controls)

ControlApplies toAnimation typeAllMode: Transition / Scroll ScrubAll except count-up and parallaxParallax speed (5–50)`parallax-background` onlyScroll Start (e.g. `"top 80%"`)Scroll-based modesScroll End (e.g. `"bottom top"`)Scrub and parallaxScrub smoothing (0–3 s)Scrub and parallaxShow markers (debug)Scroll-based modesTrigger: On Scroll / On Page LoadTransition and count-upAnimate onceScroll trigger onlyDuration / Delay / EasingTransition and count-upStagger childrengroup, columns, gallery, list, buttonsStagger between elements (s)split-words, split-charsEffect (lift, grow, shrink…)hover---

Accessibility
-------------

[](#accessibility)

`prefers-reduced-motion` is respected — all animations are skipped entirely if the user's OS has "Reduce motion" enabled.

---

Editor preview
--------------

[](#editor-preview)

When an animation is selected, the block plays a lightweight **CSS preview** in the editor canvas. Switching animation types restarts the preview automatically (the browser detects the `animation-name` change). No GSAP runs in the editor — CSS animations are GPU-accelerated with zero JS overhead.

---

Supported blocks (out of the box)
---------------------------------

[](#supported-blocks-out-of-the-box)

BlockStaggerCount-upParallaxSplit`core/group`✅—✅—`core/columns`✅———`core/column`——✅—`core/paragraph`—✅—✅`core/heading`—✅—✅`core/image`————`core/gallery`✅———`core/cover`——✅—`core/media-text`——✅—`core/list`✅———`core/buttons`✅———`core/quote`————`core/separator`————---

Installation & build
------------------------

[](#installation--build)

```
cd plugins/hm-gsap-animations
npm install
npm run build   # production → build/
npm run start   # watch mode for development
```

---

Extending to custom blocks
--------------------------

[](#extending-to-custom-blocks)

There are two ways to add support for a custom block. Use whichever fits your workflow.

---

### Option A — `block.json` supports (recommended)

[](#option-a--blockjson-supports-recommended)

Declare support directly in the block's `block.json`. The plugin detects it automatically on both the PHP and JS sides — **no filter, no extra configuration needed**.

```
{
  "name": "my-plugin/hero",
  "supports": {
    "hmGsapAnimations": true
  }
}
```

This enables all standard animations (fade, zoom, flip, scrub). To also enable specific features, pass an object instead of `true`:

```
{
  "name": "my-plugin/stats-card",
  "supports": {
    "hmGsapAnimations": {
      "stagger": true,
      "countUp": true,
      "parallax": true
    }
  }
}
```

Feature keyWhat it enables`stagger`"Animate children one by one" toggle in the Inspector`countUp``count-up` option in the animation dropdown`parallax``parallax-background` option in the animation dropdown`split``split-words` and `split-chars` options in the animation dropdown> **How it works:** On the PHP side, `get_all_supported_blocks()` scans `WP_Block_Type_Registry` at enqueue time and auto-includes any block with `hmGsapAnimations` in its supports. On the JS side, the `blocks.registerBlockType` filter reads `settings.supports.hmGsapAnimations` at registration time, and the HOCs use `getBlockType(name)?.supports?.hmGsapAnimations` at render time.

---

### Option B — PHP filter

[](#option-b--php-filter)

For blocks you don't control (third-party plugins), or when you prefer to centralise the configuration in your theme/mu-plugin:

```
add_filter( 'hm_gsap_animations_supported_blocks', function ( array $blocks ): array {
    $blocks[] = 'my-plugin/my-custom-block';
    return $blocks;
} );
```

Multiple blocks at once:

```
add_filter( 'hm_gsap_animations_supported_blocks', function ( array $blocks ): array {
    return array_merge( $blocks, [
        'my-plugin/hero',
        'my-plugin/card',
        'my-plugin/stats-counter',
    ] );
} );
```

> Note: the PHP filter only adds blocks to the base supported list. Feature flags (stagger, countUp, parallax) for PHP-filtered blocks still follow the hardcoded core lists — to enable extra features for a custom block via PHP, use the `block.json` approach above.

---

Frontend data attributes reference
----------------------------------

[](#frontend-data-attributes-reference)

The PHP `render_block` filter injects these on the outermost element:

AttributeExampleDescription`data-gsap-animation``fade-up`Animation preset key`data-gsap-mode``transition` / `scrub`Animation mode`data-gsap-trigger``scroll` / `load`When to fire (transition only)`data-gsap-duration``0.8`Tween duration (s)`data-gsap-delay``0.2`Delay before start (s)`data-gsap-ease``power2.out`GSAP ease string`data-gsap-animate-once``true`Play once or re-trigger on re-entry`data-gsap-scroll-start``top 80%`ScrollTrigger `start` value`data-gsap-scroll-end``bottom top`ScrollTrigger `end` (scrub + parallax)`data-gsap-scrub``1`Scrub smoothing lag (s)`data-gsap-show-markers``false`Enable debug markers`data-gsap-parallax-speed``20`Parallax movement intensity (5–50)`data-gsap-stagger``0.15`Delay between staggered children`data-gsap-stagger-target``children`CSS selector for stagger targets---

Adding a new animation preset
-----------------------------

[](#adding-a-new-animation-preset)

**1. Add to the editor dropdown** — `src/editor/constants.js`:

```
export const ANIMATION_OPTIONS = [
    // ...
    { value: 'rotate-in', label: 'Rotate In' },
];
```

**2. Add the GSAP `from` state** — `src/frontend/animations.js`:

```
export const ANIMATION_PRESETS = {
    // ...
    'rotate-in': { opacity: 0, rotation: -180, transformOrigin: 'center center' },
};
```

**3. Add the editor CSS preview** — `src/editor/editor.css`:

```
@keyframes gsap-preview-rotate-in {
    from { opacity: 0; transform: rotate(-180deg); }
    to   { opacity: 1; transform: rotate(0deg); }
}
.gsap-preview--rotate-in { animation-name: gsap-preview-rotate-in; }
```

Rebuild with `npm run build`. No PHP changes needed.

---

License:
--------

[](#license)

GPL-2.0-or-later —

###  Health Score

35

—

LowBetter than 77% of packages

Maintenance96

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity34

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

20d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/55361215?v=4)[Pamela Ribeiro](/maintainers/pamprn09)[@pamprn09](https://github.com/pamprn09)

---

Top Contributors

[![pamprn09](https://avatars.githubusercontent.com/u/55361215?v=4)](https://github.com/pamprn09 "pamprn09 (10 commits)")

### Embed Badge

![Health badge](/badges/humanmade-hm-gsap-animations/health.svg)

```
[![Health](https://phpackages.com/badges/humanmade-hm-gsap-animations/health.svg)](https://phpackages.com/packages/humanmade-hm-gsap-animations)
```

###  Alternatives

[sorich87/bootstrap-tour

Show people how to use your web site

4.4k301.4k](/packages/sorich87-bootstrap-tour)[pmill/php-scheduler

Simple PHP task scheduler

1834.1k](/packages/pmill-php-scheduler)[hydreflab/jedi-faker

Faker extension for Star Wars junkie

1430.1k1](/packages/hydreflab-jedi-faker)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)