search

MaggieAppleton / maggieappleton.com

⚠️ Now retired. My previous, poorly constructed digital garden built with Gatsby and MDX. Updated garden here: https://github.com/MaggieAppleton/maggieappleton.com-V2
https://maggieappleton.com
Other
161 stars 24 forks source link

fix: Animate pseudo-element instead of border #121

Closed miles-crighton closed 3 years ago

miles-crighton commented 3 years ago

Hi Maggie,

Submitting a PR to your personal website seems a bit intrusive, but at the least it can provide a little notification of something you may have been unaware of.

When hovered, the SimpleTile component's top border gets animated from 1px to 2px (turning orange), this causes the whole website to jostle up and down to accommodate the extra pixel. It's most noticeable on the Digital Garden page, as it causes a bit of a performance hit.

This PR replaces the border animation with a psuedo-element as the orange decoration. It has the same visual effect and animation just without the jostle.

Just found your work today - it's amazing. Your metaphors on metaphors in your latest essay were really insightful. I've got plenty of great articles to read up on, so thanks a bunch for doing what you do! 👍

MaggieAppleton commented 3 years ago

👋 Hi Miles,

Thanks so much for helping fix that! Really appreciate the tip. Animating borders in CSS always gets finicky and I need to remember to use pseudo-elements more.