{"action":"created","issue":{"url":"https://api.github.com/repos/koenbok/Framer/issues/252","repository_url":"https://api.github.com/repos/koenbok/Framer","labels_url":"https://api.github.com/repos/koenbok/Framer/issues/252/labels{/name}","comments_url":"https://api.github.com/repos/koenbok/Framer/issues/252/comments","events_url":"https://api.github.com/repos/koenbok/Framer/issues/252/events","html_url":"https://github.com/koenbok/Framer/issues/252","id":113717498,"number":252,"title":"Animation Sequencing Could Be Made Simpler","user":{"login":"uxdiogenes","id":523559,"avatar_url":"https://avatars.githubusercontent.com/u/523559?v=3","gravatar_id":"","url":"https://api.github.com/users/uxdiogenes","html_url":"https://github.com/uxdiogenes","followers_url":"https://api.github.com/users/uxdiogenes/followers","following_url":"https://api.github.com/users/uxdiogenes/following{/other_user}","gists_url":"https://api.github.com/users/uxdiogenes/gists{/gist_id}","starred_url":"https://api.github.com/users/uxdiogenes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/uxdiogenes/subscriptions","organizations_url":"https://api.github.com/users/uxdiogenes/orgs","repos_url":"https://api.github.com/users/uxdiogenes/repos","events_url":"https://api.github.com/users/uxdiogenes/events{/privacy}","received_events_url":"https://api.github.com/users/uxdiogenes/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2015-10-28T00:28:39Z","updated_at":"2016-08-02T16:23:54Z","closed_at":null,"body":"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 \r\n\r\n```js\r\nlayerA.animate\r\n    properties:\r\n        x: 200\r\n    curve: \"ease-in-out\"\r\n\r\nlayerA.on Events.AnimationEnd, ->\r\n    layerA.animate\r\n        properties:\r\n            x: 100\r\n        curve: \"ease-in-out\"\r\n```\r\n\r\nThis 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 \r\n\r\n`layerA.animate(animationOptions).animate(animationOptions)`\r\n\r\nAnimation 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. \r\n\r\nI 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.\r\n\r\n```\r\nseq = new Sequence(stateName1, stateName2, stateName3, ...)\r\nseq.start()\r\n```\r\n\r\nThen again, maybe this would be easy _enough_ if passing callback was easier, like proposed in https://github.com/koenbok/Framer/issues/111"},"comment":{"url":"https://api.github.com/repos/koenbok/Framer/issues/comments/236959218","html_url":"https://github.com/koenbok/Framer/issues/252#issuecomment-236959218","issue_url":"https://api.github.com/repos/koenbok/Framer/issues/252","id":236959218,"user":{"login":"uxdiogenes","id":523559,"avatar_url":"https://avatars.githubusercontent.com/u/523559?v=3","gravatar_id":"","url":"https://api.github.com/users/uxdiogenes","html_url":"https://github.com/uxdiogenes","followers_url":"https://api.github.com/users/uxdiogenes/followers","following_url":"https://api.github.com/users/uxdiogenes/following{/other_user}","gists_url":"https://api.github.com/users/uxdiogenes/gists{/gist_id}","starred_url":"https://api.github.com/users/uxdiogenes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/uxdiogenes/subscriptions","organizations_url":"https://api.github.com/users/uxdiogenes/orgs","repos_url":"https://api.github.com/users/uxdiogenes/repos","events_url":"https://api.github.com/users/uxdiogenes/events{/privacy}","received_events_url":"https://api.github.com/users/uxdiogenes/received_events","type":"User","site_admin":false},"created_at":"2016-08-02T16:23:54Z","updated_at":"2016-08-02T16:23:54Z","body":"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."}}
{"actor":{"display_login":"uxdiogenes"}}