Make animation speed configurable

[madeleineostoja]

Thanks for the super clean blob component! Would be great if the animation speed was configurable (through a duration or even friction prop) to chill things out a bit on larger blobs as well.

Imagine it's just a matter of adjusting this line? https://github.com/Hermanya/react-blob/blob/648866697fdc898f56b904afc50636459c63a989/src/index.tsx#L9

[Hermanya]

Yeah, it definitely can be done. Sounds like a cool idea thb

[Hermanya]

Might be better to do it with css variables

[madeleineostoja]

Only issue there is IE support without a polyfill. I mean I use them in every project and ponyfill them, so I don’t care, but would be a needless accessibility hit to react-blob for not much gain

[madeleineostoja]

My vote is a ‘friction’ prop that just adjusts those timing variables (maybe by x10 for saner values). In line with other react motion libs. Bit sneaky since it’s not spring physics based, but 🤷‍♀️

[Hermanya]

I added these props in v2.1.0 (now on npm):

/**
   * Default is "15s"
   */
  animationDuration?: string;
  /**
   * Default is "linear"
   */
  animationTimingFunction?: "ease" | "linear" | "ease-in-out";
  /**
   * Default is undefined, but you could set it to something like "2s"
   */
  animationDelay?: string;
  /**
   * Default is "infinite"
   */
  animationIterationCount?: "infinite" | number;

[madeleineostoja]

Amazing! Looks great 🙏