Improve how the browser handles transitions/keyframes when resizing occurs #163

IanLunn opened this Issue Jan 5, 2013 · 3 comments


None yet
2 participants

IanLunn commented Jan 5, 2013

When the browser window is resized, a touch device is orientated (or even scrolled), transitions and keyframes are manipulated by the browsers. Transitions appear to stop and keyframes are restarted. This means that Sequence animations can get out of sync or just look broken when these events occur.

Add a workaround to deal with this in the most graceful way possible.


IanLunn commented Mar 5, 2013

This also occurs when the browser tab is inactive. Using requestAnimationFrame instead of setTimeout will cause everything to stop when the tab is inactive to at least tidy that up a little, this won't affect Sequence when the browser is resized/orientated though so a solution is still needed for that.

I haven't seen this issue and I've been doing a lot of responsive resizing type stuff with Sequence: and (currently in development, so it may change)


IanLunn commented Apr 23, 2013

Great themes! Would love to feature them in the showcase.

I think this is only going to affect more complex themes like the intro on the front page of and maybe it's not so much resizing but changing to another tab and back. Animations such as the moving hands are triggered a second time and on frames like the third one, the swiping finger gets out of sync with the phone.

I also used keyframe animations for the intro theme (which aren't yet fully supported in Sequence) so maybe it relates to those more than transitions.

@IanLunn IanLunn removed this from the Version 1.2 milestone Apr 2, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment