interpolateStyles

[dillingham]

Had an idea Im unable to work on but wanted to share regardless

interpolateStyles

Like a CSS transition in defining the two css states but letting remotion figure out the in between.

Example usage

const from = {
    width: 100,
}

const to = {
    width: 200,
}

const styles = interpolateStyles(from, to, 20)

return <div style={styles}>hello</div>

Simple proof of concept

import { interpolate, useCurrentFrame } from "remotion";

const interpolateStyles = (from, to, duration) => {
  const frame = useCurrentFrame()

  let styles = {}
  
  Object.keys(from).forEach(key => {
    styles[key] = interpolate(frame, [0, duration], [from[key], to[key]])
  })

  return styles;
}

export default interpolateStyles;

Cases

• if color property, use interpolateColor()
• if numeric, use interpolate(), append the unit px
• if transform, break down string and use interpolate
• maybe skip any keys that exist in from but not in to
• background: 'red' would be hard because can be many things, maybe only backgroundColor

[JonnyBurger]

I like this idea! 💡 Thanks for sharing!