Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Open
IanLunn opened this Issue · 3 comments

2 participants

@IanLunn
Owner

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
Owner

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.

@kvcrawford

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

@IanLunn
Owner

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 SequenceJS.com 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.