Effect AOS Field

Effect AOS Field adds a new field type that lets a content editor apply AOS (Animate On Scroll) effects to other fields on the same content type or paragraph — directly from the entity's edit form, on a per-entity basis.

This is different from modules that configure animations at the content type or paragraph type level, where every instance of that bundle gets the same animation. With Effect AOS Field, the choice belongs to the editor filling in the content: two nodes of the same content type can have completely different effects, or none at all.

Features

• New field type (AOS Animation Effects) that can be added to any content type or paragraph type.
• Site builders choose, per field instance, which of the bundle's other fields are allowed to receive animations.
• Editors pick an animation effect, duration, easing, delay, and anchor placement for each allowed field, from an interactive widget on the edit form — no code or theme changes needed.
• Multiple effects can be added, edited, and removed from a simple list before saving.
• The available effects, easing functions, and anchor placements are defined in YAML and discoverable, so other modules or themes can extend or override the option list without patching this module.
• Animation attributes (data-aos, data-aos-duration, etc.) are injected during field preprocessing, so AOS registers the correct trigger points on first page load — no "scroll twice to see it" issue.

Post-Installation

After installing the module:

1. Go to Manage fields on the content type or paragraph type you want to enhance, and add a field of type AOS Animation Effects.
2. Go to Manage form display, open that field's widget settings, and select which of the bundle's other fields are allowed to receive animations.
3. Edit any content of that type: you'll see the new "Animation Effects Configuration" fieldset, where you can pick a target field, an effect, and its parameters, then click Add Effect.

There is no separate global configuration page — everything is configured per field instance (via Manage form display) and per content entity (via the edit form).

Additional Requirements

No additional Drupal modules are required. The module loads the AOS JavaScript/CSS library from a CDN by default (see effect_aos_field.libraries.yml); if you prefer to self-host it, override the library definition in your theme or a custom module.

Recommended modules/libraries

None required. If you want to serve the AOS library locally instead of from a CDN (recommended for GDPR-sensitive sites or offline development), you can download it from the AOS repository and override the library's js/css paths.

Similar projects

The Animate Fields AOS project provides similar AOS integration, but configures animations at the bundle level: every node/paragraph of a given type shares the same animation settings. Effect AOS Field instead stores the configuration per entity, so editors decide the animation on a case-by-case basis while creating or editing content.

Community Documentation

See the module's README.md for a technical overview of how the field value is read during hook_entity_view() and applied in hook_preprocess_field(), and for instructions on running the included Kernel test.