🌟 [ 5 ] Create a super fun focus by negation effect [ @ ]
( 13032 viewed : 882 like : 48 comments ) Adam Argyle posted a cool looking effect on his blog recently. It's not exactly practical in it's final form, but the earlier stages of it could be useful, and there is a lot to learn in going all-in with it.
I took a bit of a different approach with this video, doing it how I'd actually be learning something from a blog post and following along with it, so I'd love to know what you think of this format!
🔗 Links
✅ Adam’s blog post (has codepen examples of each of the steps along the way if you're looking for code): [ 🔗 Click here 🌐 ‼️ ] Easing Wizard: [ 🔗 Click here 🌐 ‼️ ] a YT membership: Join this channel to get access to perks:
[ 🔗 Click here 🌐 ‼️ ] Timestamps
00:00 -
Introduction
01:15 -
The very basics
05:55 -
Ensuring it works with focus
06:00 -
Adding in a scaling effect
08:10 -
Giving the animation some springiness
12:10 -
Looking at the mobile experience
13:20 -
Custom property based on which element we are hovering
16:10 -
Creating a sibling index
17:28 -
Using the abs() function to set the distances and do some calculations
24:00 -
Debugging
29:00 -
Figuring out how to spread them out with transform-origin
#css
Come hang out with other dev's in my Discord Community
💬 [ 🔗 Click here 🌐 ‼️ ] up to date with everything I'm up to
✉ [ 🔗 Click here 🌐 ‼️ ] hang out with me live every Monday on Twitch!
📺 [ 🔗 Click here 🌐 ‼️ ] -
Help support my channel
👨🎓 Get a course: [ 🔗 Click here 🌐 ‼️ ] Buy a shirt: [ 🔗 Click here 🌐 ‼️ ] Join as a channel member: [ 🔗 Click here 🌐 ‼️ ] Support me on Patreon: [ 🔗 Click here 🌐 ‼️ ] or through YT memberships: Join this channel to get access to perks:
[ 🔗 Click here 🌐 ‼️ ] -
My editor: VS Code -
[ 🔗 Click here 🌐 ‼️ ] -
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Bluesky: [ 🔗 Click here 🌐 ‼️ ] [ 🔗 Click here 🌐 ‼️ ] [ 🔗 Click here 🌐 ‼️ ] -
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome! [ 2025-02-05T14:00:34Z ] :flashminiupdate:2025-02-06 :::: Check it out >> [ 🔗 Click here 🌐 ‼️ ]
[ 5D ] Create a super fun focus by negation effect Create [1]
Interesting Keyword >> Createasuperfunfocusbynegationeffect
Create a super fun "focus by negation" effect
( 10 [P] ) :: 1 2 3 4 5 6 7 8 9 10 ▶️ ⭕️
