CSS-Tricks·5yGreenSock ScrollTrigger
ScrollTrigger is a new plugin from Greensock. It triggers animation when a page scrolls to certain positions, as well as when certain elements are in the viewport. It’s tightly integrated with all the other animation possibilities of GSAP. You can play with it on CodePen for free (search for it).
CSS-Tricks·5yAnimXYZ
AnimXYZ is designed to be highly customizable, calling itself “the first composable CSS animation toolkit.” You can use as many of the different composable bits as you need to get the in/out animation you want. Play with their builder and you’ll see output like: xyz="tall-2 stagger-back duration-6 ease-out-back"
CSS-Tricks·5yDynamic, Conditional Imports
With ES Modules, you can natively import other JavaScript. Like confetti, duh:import confetti from 'https://cdn.skypack.dev/canvas-confetti'; confetti();That import statement is just gonna run. There is a pattern to do it conditionally though. It’s like this: if (condition) { // await import("stuff.js"), confetti; });
CSS-Tricks·5yThe Holy Grail Layout with CSS Grid
The basic layout in this demo is not really a layout for CSS Flexbox. You could pull it off if you had to, but you’d need some kind of conceit, like grouping the nav and article together in a parent element. CSS Grid was born to describe this kind of layout and will be far easier to work with.
CSS-Tricks·5yComponents: Server-Side vs. Client-Side
Web components are reusable bits of HTML code that are written in JavaScript and made functional by the browser. Server components are also reusable, but are compiled into HTML before the browser sees them. Both types of components are still relevant and can help us build super awesome websites. Let’s explore how client and server components differ from one another.
CSS-Tricks·5yScrollbars on Hover
The trick is that mask covers the scrollbar! So, if you create a mask that is exactly as wide as the scroll bar and super duper tall, it can perfectly cover it. You can even transition the position of the mask, faking a fading in/out effect. It works across Chrome, Firefox, and Safari, regardless of my macOS settings.
CSS-Tricks·5yFixing Smooth Scrolling with Find-on-Page
When you control+f or command+f and search on CSS-Tricks, it’ll scroll very slowly instead of snapping to the result. As someone who uses this shortcut frequently, this is a usability issue for me. Until the Chromium team fixes it, here is a trick how to solve the problem on your own.
CSS-Tricks·5yMake Your Own Tools
By creating custom DevTools specific to an app, they can operate at an even higher abstraction. While this requires building and maintaining the custom Dev tools, it also means it can be tailored to the needs of the app and engineers. I think it’s super cool and smart to build custom tools for your team of developers.