ampproject / ampproject/amphtml

[Amp optimizer] Import `amp-animation-0.1.js` when story contains `animate-in` attribute or `amp-story-animation`

Open
#34,545 1 comment 1 reaction 0 assignees View on GitHub
Stale Type: Feature Request WG: stories
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

Stories run `animate-in` and `amp-story-animation` elements using [`amp-animation`](https://amp.dev/documentation/components/amp-animation/) but the component is lazy loaded if not imported in the document head. We want the amp-optimizer to add the script tag importing it when we know it will be necessary.

```html

```

### Alternatives Considered

Lazy loading `amp-animation` is what currently happens, but on throttled connections and slow devices, the lazy-loaded extension will take some time to load, delaying the `animate-in` animations, the `amp-story-animation` animations, and `finish` animations on `prefers-reduced-motion` devices.

Contributor guide

Open the contributing guide

Research direction

Start by locating the amp-optimizer logic that processes AMP stories and the existing handling for extension imports. Check how stories containing animate-in or amp-story-animation are detected, then verify the generated document head includes the amp-animation script only when needed.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
performance, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.