Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation Sequencing Could Be Made Simpler

See original GitHub issue

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, you can see the canonical way of doing this is

        x: 200
    curve: "ease-in-out"

layerA.on Events.AnimationEnd, ->
            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


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, ...)

Then again, maybe this would be easy enough if passing callback was easier, like proposed in

Issue Analytics

  • State:open
  • Created 8 years ago
  • Reactions:5
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

jordandobsoncommented, Aug 2, 2016

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 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 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, or mute the thread .

IanBellomycommented, Jan 26, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Assessment wanted for Sequencing Animations assignment
Version 3 could be made easier because we don't need the resolved value but just need to wait until the promise is fulfilled...
Read more >
Animation Sequences
An Animation Sequence is a single animation asset that can be played on a Skeletal Mesh. These contain keyframes that specify the position,...
Read more >
2D Animation Sequence
You can use Animation Sequence to apply a 2D animation to a material as a texture or render as an animated image on...
Read more >
Animate text or objects
Effects can make an object appear, disappear, or move. They can change an object's size ... Move Earlier: Make an animation appear earlier...
Read more >
Adobe DPS Made Simple: Creating Image Sequence ...
Store all the images you intended to animate all in one folder. Here I've used the work of Eadweard Muybridge and will animate...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found