Create a super fun "focus by negation" effect

Feb 05, 2025 09:00 PM - 3 days ago 4500


Adam Argyle posted a cool looking effect connected his blog recently. It's not precisely applicable successful it's last form, but the earlier stages of it could beryllium useful, and location is simply a batch to study successful going all-in pinch it. I took a spot of a different attack pinch this video, doing it really I'd really beryllium learning thing from a blog station and pursuing on pinch it, truthful I'd emotion to cognize what you deliberation of this format! πŸ”— Links βœ… Adam’s blog station (has codepen examples of each of the steps on the measurement if you're looking for code): https://nerdy.dev/hover-not-hover-sorry-not-sorryΒ  βœ… Easing Wizard: https://easingwizard.com/ Get a YT membership: Join this transmission to get entree to perks: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join ⌚ Timestamps 00:00 - Introduction 01:15 - The very basics 05:55 - Ensuring it useful pinch focus 06:00 - Adding successful a scaling effect 08:10 - Giving the animation immoderate springiness 12:10 - Looking astatine the mobile experience 13:20 - Custom spot based connected which constituent we are hovering 16:10 - Creating a related index 17:28 - Using the abs() usability to group the distances and do immoderate calculations 24:00 - Debugging 29:00 - Figuring retired really to dispersed them retired pinch transform-origin #css -- Come bent retired pinch different dev's successful my Discord Community πŸ’¬ https://discord.gg/nTYCvrK Keep up to day pinch everything I'm up to βœ‰ https://www.kevinpowell.co/newsletter Come bent retired pinch maine unrecorded each Monday connected Twitch! πŸ“Ί https://www.twitch.tv/kevinpowellcss --- Help support my channel πŸ‘¨β€πŸŽ“ Get a course: https://www.kevinpowell.co/courses πŸ‘• Buy a shirt: https://teespring.com/stores/making-the-internet-awesome πŸ“½οΈ Join arsenic a transmission member: https://youtube.com/@KevinPowell/join πŸ’– Support maine connected Patreon: https://www.patreon.com/kevinpowell aliases done YT memberships: Join this transmission to get entree to perks: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join --- My editor: VS Code - https://code.visualstudio.com/ --- I'm connected immoderate different places connected the net too! If you'd for illustration a down the scenes and previews of what's coming up connected my YouTube channel, make judge to travel maine connected Instagram and Twitter. Bluesky: https://bsky.app/profile/kevinpowell.co Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And immoderate you do, don't hide to support connected making your area of the net conscionable a small spot much awesome!
More
↑