Learn to create an engaging "focus by negation" effect in CSS through a 32-minute tutorial that breaks down Adam Argyle's innovative design technique. Starting with basic implementations, progress through adding scale effects, springy animations, and mobile responsiveness. Master advanced concepts including custom properties for hover states, sibling indexing, and the abs() function for distance calculations. Explore practical debugging techniques and discover how to manipulate transform-origin for spread effects. Access complementary resources including code examples on CodePen and an easing wizard tool to enhance the learning experience. Perfect for developers looking to implement creative and interactive CSS effects while understanding the underlying principles of modern web animation.
Overview
Syllabus
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
Taught by
Kevin Powell
