Animation Sequencing Could Be Made Simpler

The chaining together of multiple animations into animation sequences is a pretty common scenario, but doing it in Framer is more difficult than it should be. It could be made simpler with some improved APIs or shortcuts in the APIs. From http://framerjs.com/learn/basics/events/, you can see the canonical way of doing this is

layerA.animate
    properties:
        x: 200
    curve: "ease-in-out"

layerA.on Events.AnimationEnd, ->
    layerA.animate
        properties:
            x: 100
        curve: "ease-in-out"

This is unwieldy with just one animation after another, and quickly gets out of hand when you have a set or 3 or more, and it becomes tricky to handle ordering. I could imagine instead an API that looks more like

layerA.animate(animationOptions).animate(animationOptions)

Animation objects could also support something similar like animation.chain(animation) or animation.then(animation or function) 👈🏾 (I bet that second one will throw folks who know about promises for a loop but ¯_( ˘͡ ˘̯)_/¯). The point here is adding behaviors in an ordered sequence is common and should require less code to accomplish.

I could also imagine some shortcut way of doing this with states, the way you can easily cycle to the next one with next. For illustration purposes (I’m sure there’s a better way), an example might be a new object with an API like animations for chaining animations between states.

seq = new Sequence(stateName1, stateName2, stateName3, ...)
seq.start()

Then again, maybe this would be easy enough if passing callback was easier, like proposed in https://github.com/koenbok/Framer/issues/111

[jordandobson]

The way they do chaining is pretty great more specifically. But you are setting up an animation object first. On Tue, Aug 2, 2016 at 9:25 AM Jordan Dobson [e-mail] wrote:

If you haven’t seen how Greensock does it then you should take a look. On Tue, Aug 2, 2016 at 9:23 AM Diogenes Brito [e-mail] wrote:

Maybe. But even a simpler version would be handy. Maybe you 1) create a set of individual animation objects, 2) You create a sequence/timeline object with either an array of those (each one starts with the last one ends) or by defining when each one should begin relative to the beginning of the sequence, and then 3) you can use the sequence object like you would a single animation. Meaning you could call start() on it, listen for when it’s over, etc.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/koenbok/Framer/issues/252#issuecomment-236959218, or mute the thread https://github.com/notifications/unsubscribe-auth/AACbYtEiDcywmtUFraUbQiBepRpvqXpcks5qb28bgaJpZM4GW_hJ .

[IanBellomy]

Even with @uxdiogenes 's example there’s still the outstanding AnimationEnd listener may need cleaned up.