Support for content animations

[sentience]

trafficstars

We’re about to build a feature that requires “content” animations, not just style animations, and we’re wondering how far elm-style-animation is from being able to support this. Would it make sense to try to contribute support for this to elm-style-animation, or is the problem sufficiently different that you’d encourage us to solve it in a separate library?

Specifically, we’d like to animate a bar graph so that the height of each bar grows to its assigned size, while at the same time a number that labels the bar counts up. Both the height of the bar and the current count should be animated with the same spring “physics”.

This is relatively straightforward in react-motion, which we’ve used before. From the README:

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

elm-style-animation does a really nice job of abstracting away the details of animating styles between values, but we wonder if it might be possible to also expose arbitrary integers like these (Animation.int, perhaps?), which could then be used to generate content, in addition to styles, in our views.

Thanks for any advice you may provide!

[mdgriffith]

Hello!

Interesting. Yeah, I think it does make sense for this library to have some way to do that. I'm going to have to give it some thought as how exactly it would work.

I'm going to put this on the list for v4.0 of the library. I'm not 100% sure on the timeframe of the new release as it relies on me finishing the elm-path library. I'm hoping it will be 1-1.5 months.

For an interim solution it might make sense to manually animate the integers using easing functions, outside of the library. Not as good as springs, but it still might be fine. One of the main advantages of springs is in physics based smoothing of interruptions, which probably matters less for actually displaying something like numbers as opposed to physical motion.

[sentience]

Thing is, we're hoping to sync the number’s easing with the styles’ easing, and we want the interruptible nature of the springs.

We're thinking of trying a fork and seeing if we can cobble together an MVP of this feature. We'll share where we get with it in case it’s of use.

[sentience]

Thanks so much for the advice, by the way! Exciting to see this on the roadmap for 4.0.

[mdgriffith]

Cool, I'm interested to see what you come up with!

[Natim]

I was looking forward to implement something like that:

• https://css-tricks.com/animating-the-content-property/#article-header-id-1
• https://css-tricks.com/reverse-text-color-mix-blend-mode/