Does anyone have recommendations for motion design "coding" guidance. I'm interested in making a little FRP-oriented library for managing motion designs and fluid transitions. My implementation will be for web, but I suspect there are a lot of ideas from other ecosystems as well (like data viz, and game dev) Right now, I have some foundational "spring" physics to manage my input "t" step values. Next, I'm planning on designing a basic API for describing the property value mapping mathematics.

Are you asking for input on things like... how to structure the concepts so that you get the best motions possible? As a motivating example, one approach might be to create a data structure that contains a start value, end value, perhaps the current time, and perhaps some ease function (or spring, sure). Then, each frame, you increment the time and compute a new intermedia value to display. But then what do you do if, midway through the transition, the destination needs to change? Or what happens if you need to cancel the transition mid-flight? You'll probably get discontinuities. A better approach might be to store a current value and velocity, as well as a function that handles acceleration with respect to some goal value (again, could be a spring). Then if you need to change the destination, you can just change the acceleration function, and the velocity changes smoothly as a result, and you don't get discontinuities. But what if you need to revert the transition, and return to the start point? You'll need to store that too. If this is the level of design thinking you're looking for, the best thing I remember coming across is a WWDC session titled Designing Fluid Interfaces, where they talk about the stuff you want when designing an animation abstraction, plus how to design the coding interface so that it's artist-friendly (in other words, so that you can more easily predict what sort of motion you'll get when specifying parameters). Hope that helps!

Thanks @Ivan Reese, this sounds great! Using a spring as the lowest primitive has allowed me to avoid interrupted motions. The talk looks really applicable and inspiring, thanks for sharing!

When you say 'FRP-oriented', do you mean you'll be integrating with some larger FRP library/framework/ecosystem?

@Jack Rusher, yes. I’m primarily building around RxJS as our Observable primitive. https://github.com/colelawrence/behavior-state/blob/master/src/spring/BehaviorSpring.ts (this “Spring” is not React-specific) https://github.com/storyai/jsx-view (RxJS as values. e.g.

<div style={styleStringObservable$}/>

)

When I did this at invision, we leveraged the greensock API for our motion prototyping tool The barrier for most devs seems to be understanding the three animation cases (transition, add, and delete), handling the corner cases (usually things like a half-drag, undo/redo/back/forward, and click during transition), and dealing with topology morphing (square-> circle or solid->gradient, though there are some decent libraries for this)

Thanks for the reference Don! I’ll take a close look at Greensock’s animation concepts

Greensock is great. Well worth the commercial license cost if you don't want to write your own animation lib.

I’ll also say from experience that designers LOVE to tweak animation timings, so make that easy :)