JonnyBurger / spring-loaded

The logo of Apples "Spring Loaded" event implemented in Remotion.

Remotion video

The logo of Apples "Spring Loaded" event implemented in Remotion.

Steps taken:

1. Traced the logo manually in Sketch and exported as SVG
2. Use plain JS getTotalLength() and getPointAtLength() methods to calculate coordinates of path
3. Draw for each point a <div> - this is super slow unfortunately but not noticeable in the end product
4. Use interpolateColors and spring functions to animate

Welcome to your Remotion project!

Commands

Start Preview

npm start

Render video

npm run build

Server render demo

npm run server

See docs for server-side rendering here.

Upgrade Remotion

npm run upgrade

Docs

Get started with Remotion by reading the fundamentals page.

Issues

Found an issue with Remotion? File an issue here.

License

This code: MIT
The Remotion license: Note that for some entities a company license is needed. Read the terms here.