HM GSAP Animations
Adds GSAP animation controls to core and custom blocks via the block editor.
by Human Made Limited · github.com/humanmade/hm-gsap-animations
★ 0stars
3composer installs
0forks
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/humanmade/hm-gsap-animations/archive/refs/heads/main.zipAlso on Packagist as humanmade/hm-gsap-animations:
composer require humanmade/hm-gsap-animationsFrom the readme
HM GSAP Animations
https://github.com/user-attachments/assets/dcd40c06-0d4c-4335-a7a6-c265751a5888
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 (scrub mode, keyframe markers) and Counting Number Block (count-up, animate-once, reduced motion).
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 renderblock 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
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)
The animation progress is tied 1-to-1 to the scroll position between Start and End keyframes. P
Read the full README on GitHub →
Releases
| Tag | Published | Asset | Downloads |
|---|---|---|---|
| 1.0.0 | May 20, 2026 | — | — |