fix(progressbar): progress bar animation jitter #5509
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 6fbb765 The changes in this PR will be included in the next version bump. This PR includes changesets to release 84 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Branch previewReview the following VRT differencesWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
If the changes are expected, update the |
Tachometer resultsChromeprogress-bar permalinkbasic-test
Firefoxprogress-bar permalinkbasic-test
|
marissahuysentruyt
force-pushed
the
marissahuysentruyt/fix-progress-bar-animation-jitter
branch
from
8b82cb1 to
d09f711
Compare
|
@marissahuysentruyt It most certainly fixes the bug @Rajdeepc mentioned. When I slowed down the animation speed the progress fluidly fills the tracks from 0% to 100% and doesn't start with a width. Screen.Recording.2025-06-11.at.10.47.35.AM.mov |
marissahuysentruyt
force-pushed
the
marissahuysentruyt/fix-progress-bar-animation-jitter
branch
from
d09f711 to
159efe4
Compare
castastrophe
force-pushed
the
marissahuysentruyt/fix-progress-bar-animation-jitter
branch
from
c83edb0 to
6fbb765
Compare
- adds magic number positioning to progress bar animation keyframes, to smooth out the looping animation
- alters animation for ltr and rtl to position the fill fully off the track at beginning and end of animation, to smooth out the looping
marissahuysentruyt
force-pushed
the
marissahuysentruyt/fix-progress-bar-animation-jitter
branch
from
6fbb765 to
ddbd3c3
Compare
13 tasks
|
New branch here: #5535 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
I am in favor of the second commit, simply redefining the keyframes so that the fill's starting position is off of the track, as opposed to partially on the track.
Motivation and context
CSS-1241
A bug was recently reported in Slack that said:
This PR aims to smooth out the transition between the end and the start of the animation loop.
Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Descriptive Test Statement
Descriptive Test Statement
Device review