{"action":"created","issue":{"url":"https://api.github.com/repos/mozilla/browser.html/issues/747","labels_url":"https://api.github.com/repos/mozilla/browser.html/issues/747/labels{/name}","comments_url":"https://api.github.com/repos/mozilla/browser.html/issues/747/comments","events_url":"https://api.github.com/repos/mozilla/browser.html/issues/747/events","html_url":"https://github.com/mozilla/browser.html/issues/747","id":119255299,"number":747,"title":"Switching animation should not jumping elements","user":{"login":"Gozala","id":21236,"avatar_url":"https://avatars.githubusercontent.com/u/21236?v=3","gravatar_id":"","url":"https://api.github.com/users/Gozala","html_url":"https://github.com/Gozala","followers_url":"https://api.github.com/users/Gozala/followers","following_url":"https://api.github.com/users/Gozala/following{/other_user}","gists_url":"https://api.github.com/users/Gozala/gists{/gist_id}","starred_url":"https://api.github.com/users/Gozala/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Gozala/subscriptions","organizations_url":"https://api.github.com/users/Gozala/orgs","repos_url":"https://api.github.com/users/Gozala/repos","events_url":"https://api.github.com/users/Gozala/events{/privacy}","received_events_url":"https://api.github.com/users/Gozala/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"Gozala","id":21236,"avatar_url":"https://avatars.githubusercontent.com/u/21236?v=3","gravatar_id":"","url":"https://api.github.com/users/Gozala","html_url":"https://github.com/Gozala","followers_url":"https://api.github.com/users/Gozala/followers","following_url":"https://api.github.com/users/Gozala/following{/other_user}","gists_url":"https://api.github.com/users/Gozala/gists{/gist_id}","starred_url":"https://api.github.com/users/Gozala/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Gozala/subscriptions","organizations_url":"https://api.github.com/users/Gozala/orgs","repos_url":"https://api.github.com/users/Gozala/repos","events_url":"https://api.github.com/users/Gozala/events{/privacy}","received_events_url":"https://api.github.com/users/Gozala/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/mozilla/browser.html/milestones/14","html_url":"https://github.com/mozilla/browser.html/milestones/Backlog","labels_url":"https://api.github.com/repos/mozilla/browser.html/milestones/14/labels","id":1269887,"number":14,"title":"Backlog","description":"","creator":{"login":"gordonbrander","id":58421,"avatar_url":"https://avatars.githubusercontent.com/u/58421?v=3","gravatar_id":"","url":"https://api.github.com/users/gordonbrander","html_url":"https://github.com/gordonbrander","followers_url":"https://api.github.com/users/gordonbrander/followers","following_url":"https://api.github.com/users/gordonbrander/following{/other_user}","gists_url":"https://api.github.com/users/gordonbrander/gists{/gist_id}","starred_url":"https://api.github.com/users/gordonbrander/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gordonbrander/subscriptions","organizations_url":"https://api.github.com/users/gordonbrander/orgs","repos_url":"https://api.github.com/users/gordonbrander/repos","events_url":"https://api.github.com/users/gordonbrander/events{/privacy}","received_events_url":"https://api.github.com/users/gordonbrander/received_events","type":"User","site_admin":false},"open_issues":18,"closed_issues":20,"state":"open","created_at":"2015-08-24T17:14:07Z","updated_at":"2016-01-08T23:33:49Z","due_on":null,"closed_at":null},"comments":3,"created_at":"2015-11-27T22:46:07Z","updated_at":"2016-01-08T23:36:08Z","closed_at":null,"body":"At the moment animations compute every property that is animated from the animation progress. While this greatly simplifies state management overhead for animations it introduces a major limitation - That is:\r\n\r\nIf say you have `\"show-tabs\"` animation running (that animates an elements `translateX`) that supposed to have  `d1`ms duration, but after `p1`ms from the start of that animation user triggers `\"hide-tabs\"` animation (animates `translateX` in an opposite direction) that supposed to run for `d2`ms:\r\n\r\n```\r\nshow-tabs: -----p1--d1\r\nhide-tabs:      ----------d2\r\n```\r\n\r\nYou would want to:\r\n\r\n1. To animate `x` from the current position which will be different from the generally expected start position.\r\n2. Adjust duration of the `\"hide-tabs\"` animation presumably so that it will be shorter than `d2` given that starting point of the animated element is different (distance `x` needs to travel shorter).\r\n\r\nInitially I assumed that in such case we would generate new animation model `{start, end, time}` but offset it such that `start` progress of the new animation would match up with a progress of the previous animation. But this solution is incomplete given that progress may be translated to `x` with a different  easing in `show-tabs` / `hide-tabs` animation there for `p` progress in `show-tabs` animation may translate to `x` that is different from `y` that is computed from the same `p` progress in `hide-tabs` animation. Not to mention that different animation may animate different properties there for properties not present in the subsequent animation would have to be somehow be transitioned to normal.\r\n\r\nIn general I think there are following possible solutions:\r\n\r\n\r\n1. We may just queue action that triggered animation switch until currently running animation is complete.  Possibly speed up the animation.\r\n\r\n  **Pros:**\r\n    1. Any combination of animations will work without explicit interference.\r\n\r\n  **Cons:**\r\n    1. UI may appear unresponsive to a user given that interaction will be queued.\r\n    2. Several use actions may end up in a queue while first animation is still completing. In some cases it maybe `show / hide / show` and in such case we either drop first two and require logic to handle this or just go with a queue. In one case UI will appear unresponsive and in other it will appear laggy. \r\n\r\n2. We can store properties being animated into a model instead of computing them in the view. That way switched animation will start from the current state of the model instead of assumed starting point.\r\n\r\n  **Pros:**\r\n    1. We will switching animations right away and there for UI won't appear laggy or unresponsive.\r\n\r\n  **Cons:**\r\n\r\n    1. Each animation would have to consider all other animations it may be replaced with - meaning that they would have to take into account every property that can be animated and consider how to interpolate it to provide smooth transition (Probably applying some spring physics would make this a lot easier).\r\n    2. Requires extra state management."},"comment":{"url":"https://api.github.com/repos/mozilla/browser.html/issues/comments/170157047","html_url":"https://github.com/mozilla/browser.html/issues/747#issuecomment-170157047","issue_url":"https://api.github.com/repos/mozilla/browser.html/issues/747","id":170157047,"user":{"login":"Gozala","id":21236,"avatar_url":"https://avatars.githubusercontent.com/u/21236?v=3","gravatar_id":"","url":"https://api.github.com/users/Gozala","html_url":"https://github.com/Gozala","followers_url":"https://api.github.com/users/Gozala/followers","following_url":"https://api.github.com/users/Gozala/following{/other_user}","gists_url":"https://api.github.com/users/Gozala/gists{/gist_id}","starred_url":"https://api.github.com/users/Gozala/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Gozala/subscriptions","organizations_url":"https://api.github.com/users/Gozala/orgs","repos_url":"https://api.github.com/users/Gozala/repos","events_url":"https://api.github.com/users/Gozala/events{/privacy}","received_events_url":"https://api.github.com/users/Gozala/received_events","type":"User","site_admin":false},"created_at":"2016-01-08T23:36:08Z","updated_at":"2016-01-08T23:36:08Z","body":"@gordonbrander when do you thing would be a good time for me to work on this ?"}}