Create a super fun "focus by negation" effect
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!