PHPackages                             jacerider/neo\_animate - 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. jacerider/neo\_animate

ActiveDrupal-module[Utility & Helpers](/categories/utility)

jacerider/neo\_animate
======================

Scroll-triggered viewport animations for Neo components: reveal, stagger, parallax, and exit animations.

1.0.8(3w ago)051proprietaryTypeScript

Since Sep 9Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/jacerider/neo_animate)[ Packagist](https://packagist.org/packages/jacerider/neo_animate)[ Docs](https://github.com/jacerider/neo_animate)[ RSS](/packages/jacerider-neo-animate/feed)WikiDiscussions develop Synced 2w ago

READMEChangelogDependencies (4)Versions (10)Used By (0)

Neo | Animate
=============

[](#neo--animate)

Scroll-triggered viewport animations for Neo components: reveal on enter, item stagger, parallax, and optional exit animations. Built on the existing `neo/animate` catalog (an animate.css fork namespaced as `.neo-animate--*`) plus a small IntersectionObserver driver — no external animation library.

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

[](#how-it-works)

Authors write **marker classes** (they carry no animation CSS themselves); the driver (`src/js/neo-animate.ts`) applies the real catalog classes at the right moments. Only the driver ever writes `neo-animate--animated` and raw catalog names. Elements queued for a reveal are pre-hidden (opacity only) behind an `html.neo-animate-ready` gate added by an inline head script — no-JS visitors and `prefers-reduced-motion` users always see content.

Class API
---------

[](#class-api)

Class / attributeWritten byMeaning`neo-animate`prop / devReveal this element on viewport enter`neo-animate-enter--`prop / devWhich catalog animation plays on enter (e.g. `neo-animate-enter--fadeInUpSmall`)`neo-animate-exit--`devPlay this catalog animation on exit, then re-arm (implies repeat)`neo-animate-repeat`devRe-arm on exit without an exit animation`neo-animate-stagger`prop / devCascade `.neo-animate-item` descendants (+100ms each; tune with `data-neo-animate-stagger=""`). Items are observed independently and cascade as **they** enter the viewport — not when the root does — so a slow scroller always sees it`neo-animate-item`dev, in twigMarks a staggerable child`neo-animate--{fastest,faster,fast,slow,slower,slowest}`prop / devSpeed — catalog compound modifiers, inert until armed`neo-animate--delay-{fastest…slowest}`prop / devDelay — same`data-neo-parallax=""`devrAF parallax (e.g. `0.15`, clamped ±1). **Never on the same element as a reveal** — transforms fight; use a child/wrapperPlayground (`/admin/config/neo/animate`)
----------------------------------------

[](#playground-adminconfigneoanimate)

A frontend-developer tool under **Configuration → Neo → Animate**:

- **Playground** — pick animation / speed / delay / repeat, preview live with a Replay button, and copy the result in three forms (marker classes, the `neo_animate` Twig filter, the Alchemist prop values).
- **Gallery** — every catalog animation grouped by family, click a tile to replay.
- **Stagger** and **Parallax** live demos.
- **Simulate reduced motion** toggle to preview the accessible fallback.

Gated by the `access neo_animate demo` permission (uid 1 bypasses; grant it to any role that should see the tool).

Twig authoring (ordinary templates)
-----------------------------------

[](#twig-authoring-ordinary-templates)

For non-Alchemist templates (node/views/block/field twigs) two filters apply the same animations without hand-writing marker classes — no library attach needed (the driver is global):

```
{# animate an attributes object #}
…

{# stagger a render array's children: +200ms every 2nd item #}
{{ content.field_images|neo_animate_children('zoom-in', 2, 200) }}
```

Friendly names (`fade`, `fade-up/down/left/right`, `zoom-in/out`, `slide-*`, `flip-*`, `bounce`) map to catalog effects; any other value passes through as a raw catalog name, so the full catalog (`tada`, `jello`, `fadeInUpSmall`, …) is reachable. Options: `speed` (bucket), `delay` (ms number or bucket string), `once` (`false` → replays via repeat), `exit` (a catalog name). Precise `delay`values ride on a `data-neo-animate-delay` attribute the driver applies on reveal.

Alchemist props
---------------

[](#alchemist-props)

Any component opts in with:

```
animate:
  type: animate
animate_speed:
  type: animate_speed
animate_delay:
  type: animate_delay
animate_stagger:
  type: animate_stagger
```

Stagger additionally needs the component's repeating element to carry the `neo-animate-item` class in its twig. Editors picking Stagger on a component without item markers is a harmless no-op; Animation "None" never hides anything.

Behavior matrix
---------------

[](#behavior-matrix)

ContextBehaviorLive pagePre-hidden, reveals at 12% visibility, once by defaultAlchemist preview iframePlays immediately on every reload (demo mode); exit/repeat disabledPreview screenshot capture (`screenshotComponents` postMessage)Running animations jump to their final frame before html2canvas captures`prefers-reduced-motion`Nothing hidden, nothing animatedJavaScript disabledNothing hidden (ready class never added)Pitfalls
--------

[](#pitfalls)

- Catalog speed/delay modifiers are compound selectors — inert without `neo-animate--animated`. That's by design; don't "fix" them.
- A custom style list for the `animate` prop must keep a `none: { value: '' }`option (empty styles maps are rejected).
- All classes here are plain CSS (catalog + this module) — no Tailwind rebuild is needed when using them; `drush cr` after editing prop defs or component yml.

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance94

Actively maintained with recent releases

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 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

Every ~86 days

Recently: every ~104 days

Total

9

Last Release

21d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/097ea6514c7dff8bd82162fe88411080a14444a73f86c15ab22eefe28a33059d?d=identicon)[jacerider](/maintainers/jacerider)

---

Top Contributors

[![jacerider](https://avatars.githubusercontent.com/u/638651?v=4)](https://github.com/jacerider "jacerider (12 commits)")

### Embed Badge

![Health badge](/badges/jacerider-neo-animate/health.svg)

```
[![Health](https://phpackages.com/badges/jacerider-neo-animate/health.svg)](https://phpackages.com/packages/jacerider-neo-animate)
```

###  Alternatives

[farmos/farmos

A web-based farm record keeping application.

1.3k7.3k1](/packages/farmos-farmos)[emulsify-ds/emulsify-drupal

The official Drupal theme for Emulsify, with Storybook and a Vite-based build workflow for generated child themes

96561.6k2](/packages/emulsify-ds-emulsify-drupal)

PHPackages © 2026

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