ampproject / ampproject/amphtml
I2I: New component `amp-lottie-animation`
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## Summary
There's an AMP element available already which enables developers to use Bodymovin animations on AMP pages: [amp-bodymovin-animation](https://amp.dev/documentation/examples/components/amp-bodymovin-animation/). This component is based on an old version of Bodymovin, v4.
Version 5 comes with very significant improvements, especially around performance. The current component, based on an old version, can hurt performance of web pages significantly, see https://ridedott.com. Version 5 does not have any breaking changes besides renaming from Bodymovin to Lottie (see [changelog](https://github.com/airbnb/lottie-web/blob/master/CHANGELOG.md#v-500)).
My main goal would be to add two functionalities: rendering using Web Workers and and OffscreenCanvas (without an iframe) as well as a regular canvas renderer (in an iframe), ideally with an automatic fallback.
## Design document
I'd like to have some preliminary feedback for this idea before prototyping and writing a detailed API design.
## Motivation
My main motivations are:
- Performance improvements that are much needed on the website I'm working on.
- Finally making some contribution to the project I use extensively.
Alternatively we could update the existing component to v5 (which theoretically should be backwards compatible) and extend the API.
## Additional context
Home page of a website I'm working on has just two animations and those already make it very laggy: https://ridedott.com/.
## Launch tracker
I'll add the tracker if we agree to proceed.
/cc @ampproject/wg-approvers @dvoytenko
Contributor guide
Research direction
Start by reviewing the existing amp-bodymovin-animation component and the linked Lottie v5 changelog. The issue requests preliminary feedback before prototyping, so the next step is to establish whether to create amp-lottie-animation or update the existing component, then define the worker, OffscreenCanvas, iframe, and fallback API before implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100