fix(GlobalHeader): Consolidate animated headers #1454
Conversation
katiezutter
requested review from
codecaaron and
jakemhiller
and removed request for
a team
Codecov Report
@@ Coverage Diff @@
## je-header-animation #1454 +/- ##
=======================================================
+ Coverage 82.88% 83.17% +0.29%
=======================================================
Files 337 337
Lines 2804 2782 -22
Branches 729 718 -11
=======================================================
- Hits 2324 2314 -10
+ Misses 424 415 -9
+ Partials 56 53 -3
|
packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx
Show resolved
Hide resolved
|
Ah.. this seems to re-introduce one of the initial pre-two-header bugs. When scrolling down from the very top, scroll back up and the header instantly reappears instead of transitions. It transitions normally when scrolling down and up in the middle of the page. We could ask design if that's a dealbreaker. Screen.Recording.2021-03-03.at.1.00.03.PM.mov |
|
@jcenglish wow great catch!! I'll try to fix that now! |
packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx
Outdated
Show resolved
Hide resolved
| } | ||
|
|
||
| .translateDown { | ||
| .transitionSlideDown { |
There was a problem hiding this comment.
I'm wondering if this will be much easier to manage with framer-motion.
There was a problem hiding this comment.
If we move to framer-motion, we may have to create a separate AnonymousAppHeader or always have animation: false for
type:anon
variant: landing
i'm interpreting this comment to mean we shouldn't rely on framer-motion on the anonymous landing page
There was a problem hiding this comment.
@jcenglish pulling you in here too if you have thoughts about framer-motion!
There was a problem hiding this comment.
🤔 I wouldn't know how to implement framer-motion in this case, so, I have no thoughts about it. But... since we're leaning towards releasing without the midpage sliding transitions, maybe we don't need to think about it right now.
packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx
Outdated
Show resolved
Hide resolved
📬Published Alpha Packages:@codecademy/gamut-kit@0.1.1-alpha.ffe59c.0 |
|
🚀 Styleguide deploy preview ready! |
Overview
Address accessibility issue by consolidating headers; removes slide up/down transitions.
Major update: For these animations, we are now removing the slide up/down transitions, as per this new design:
Came out of work from https://github.com/Codecademy/client-modules/pull/1430.
We were seeing an accessibility issue where the user could navigate through both the visible and the hidden header at any given time. Merging into one header solves this issue, but there might be animation implications that I haven't thought about!
PR Checklist