report: avoid paint storms on scrolly header #5207
Conversation
paulirish
changed the title
| </g> | ||
| <g mask="url(#b)" fill="#FFF"> | ||
| <g transform="translate(96 86)"> | ||
| <circle cx="87.5" cy=".5" r="1" /> |
There was a problem hiding this comment.
these are the little stars right? should we just remove them? they look a little weird, deleting this whole block looks better IMO
| before | after |
|---|---|
 |
 |
|
| text-align: right; | ||
| transform-origin: bottom right; | ||
| will-change: opacity; /* opacity is changed on scroll */ |
There was a problem hiding this comment.
see the score scales look fine with this now, how are you supposed to tell when the text will be messed up by this?
| animation: panacross 30s linear infinite; | ||
| animation-play-state: paused; | ||
| } | ||
| .lh-header-sticky:hover .lh-lighthouse__clouds { |
There was a problem hiding this comment.
the :hover threw me for a while since the hitbox includes the dropdown of the scores, how much do you like the hover effect vs. always? :)
There was a problem hiding this comment.
I'm personally ok with always, too :)
Something something lighthouse is always looking out for you metaphor
| animation: panacross 30s linear infinite; | ||
| animation-play-state: paused; | ||
| } | ||
| .lh-header-sticky:hover .lh-lighthouse__clouds { |
There was a problem hiding this comment.
I'm personally ok with always, too :)
Something something lighthouse is always looking out for you metaphor
|
whats the deal |
paulirish
force-pushed
the
headertransforms
branch
from
5ff7c89 to
f6a061f
Compare
paulirish
changed the title
paulirish
changed the title
And animate the clouds on hover
Here's the diff on the paint storms. Before and after:
Check out the deployment to try the animated clouds.