Framer
Framer copied to clipboard
koenbok
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
There's already some work done on this in AnimationGroup.coffee but that API isn't completely thought out and finished yet.
As for your suggestions: I don't like the chaining, as we don't really do that anywhere else in the Framer Library.
I see us implementing something like layer.animateSequence ["stateA", "stateB", "stateC"] though, so any more thoughts on this are welcome!
I think an object representing a sequence of animations that you can interact with like a single animation might make the most sense.
Maybe. But even a simpler version would be handy (like what you mentioned at the end of your first response, but with animations instead of states).
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.
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 [email protected] 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 .
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 [email protected] 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 [email protected] 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 .
Even with @uxdiogenes 's example there's still the outstanding AnimationEnd listener may need cleaned up.
