The logo of Apples "Spring Loaded" event implemented in Remotion.
Steps taken:
- Traced the logo manually in Sketch and exported as SVG
- Use plain JS
getTotalLength()
andgetPointAtLength()
methods to calculate coordinates of path - Draw for each point a
<div>
- this is super slow unfortunately but not noticeable in the end product - Use
interpolateColors
andspring
functions to animate
Welcome to your Remotion project!
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
Get started with Remotion by reading the fundamentals page.
Found an issue with Remotion? File an issue here.
This code: MIT
The Remotion license: Note that for some entities a company license is needed. Read the terms here.