0

react spring comes with an animated function that allows components to be modified natively without having to re-render the component. I found that animated components have a couple of methods that are similar to react native's animated components. Is there any connection between the two or are the concepts like .interpolate() just very common for animation libraries?

cubefox
  • 1,251
  • 14
  • 29

1 Answers1

1

The library was initially a fork of Animated and still bears lots of resemblance internally. Christopher Chedeau's Animated has a repo dedicated to the web: https://github.com/animatedjs/animated Sadly it is not maintained any longer.

The way it works is that components get wrapped via createAnimatedComponent (which is exposed as "animated"): https://github.com/react-spring/react-spring/blob/master/src/animated/createAnimatedComponent.tsx

This higher order component intercepts styles and attributes (which aren't raw values but self-updating classes). It calls "applyAnimatedValues" to write to the target outside React. Each target (dom, native, konva, three, etc) has to fill it out. For instance here's how the dom applies these props: https://github.com/react-spring/react-spring/blob/master/src/targets/web/globals.ts#L82-L127

Hope that helps!

hpalu
  • 1,357
  • 7
  • 12
  • thanks! Do you know if there are docs about it somewhere? I couldn't really find anything about animated specifically... – cubefox Mar 12 '19 at 18:30
  • Only what's in basics: https://www.react-spring.io/docs/hooks/basics It's not that much to cover. It makes it possible to put self updating values into your component via a HOC, something that wouldn't be possible with plain styles and attributes. Hocs are a fairly common pattern in React, this one just goes in between styles. – hpalu Mar 13 '19 at 07:55