ampproject / ampproject/amphtml

I2I: New component `amp-lottie-animation`

Open
#30,865 6 comments 2 reactions 0 assignees View on GitHub
INTENT TO IMPLEMENT Stale WG: components
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.