feat: add enter opacity transition to bars#612
Conversation
✅ Heimdall Review Status
✅
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
✅
2/1
|
Denominator calculation
|
| }, | ||
| ]} | ||
| stackGap={stackGap} | ||
| transitions={{ enter: { type: 'timing', duration: 5000, delay: 2000 } }} |
There was a problem hiding this comment.
While I feel like this doesn't need to be covered in docs or storybook (since it is an obvious fix), there was this one example in storybook with a weirdly long delay and duration.
| const enterTransitionWithStagger = useMemo( | ||
| () => withStaggerDelayTransition(enterTransition, normalizedStagger), | ||
| [enterTransition, normalizedStagger], | ||
| ); |
There was a problem hiding this comment.
We split enter and enter with stagger so that we can use the pre staggered enter transition.
|
|
||
| hasAnimatedEnterOpacity.current = true; | ||
| enterOpacity.value = buildTransition(1, enterOpacityTransition); | ||
| }, [animateEnterOpacity, isReady, enterOpacityTransition, enterOpacity]); |
There was a problem hiding this comment.
On mobile we need to track opacity transition and build the transition ourselves.
| return { | ||
| ...enterOpacityTransition, | ||
| delay: enterOpacityTransition.delay ?? enterTransition?.delay, | ||
| staggerDelay: enterOpacityTransition.staggerDelay ?? enterTransition?.staggerDelay, |
There was a problem hiding this comment.
We fallback to the default delay and staggerDelay of the enter transition, this should help with any custom transitions and should prevent and breaking issues with custom transitions (which likely don't exist but best to be safe).
| * Transition for the initial enter opacity animation. | ||
| * Uses a default subtle fade when undefined (unless `enter` is disabled). | ||
| * @note falls back to `enter` timing offsets (`delay` and `staggerDelay`) when not provided. | ||
| * Set to `null` to disable enter opacity animation. Automatically set to null if enter transition is disabled. |
There was a problem hiding this comment.
Flagging our custom logic for delay and staggerDelay on enterTransition (where it falls back to enter values).
sverg-cb
left a comment
sverg-cb
left a comment
There was a problem hiding this comment.
Thanks for your clarifying comments 🚀
4 participants
What changed? Why?
This PR adds
enterOpacityto bar animations, which has a default of 150 ms. Before, bars didn't animate opacity and thus would be at 100% opacity with their minimum size until animating to their target path. This left a weird starting position with the stagger delay + initial size where bars would sit there fully visible.Adding this opacity transition solves it. The values came from motion.
Root cause (required for bugfixes)
No bug here, this was a known missing feature when we supported min size.
UI changes
BeforeTrimmed.mov
AfterTrimmed.mov
MobileBefore.mp4
MobileAfter.mp4
Testing
Test this on mobile and web with bar chart (and test all other charts).
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false