Search
Exploring Animations for Menu Hover Effects
8.7.2020
A couple of ideas for creative menu hover animations with images.
The post Exploring Animations for Menu Hover Effects appeared first on Codrops
Collective #612
2.7.2020
60 Days of Animation * Stryve * The design systems between us * html.systems * Design Better Buttons
The post Collective #612 appeared first on Codrops
Creating a Menu Image Animation on Hover
1.7.2020
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
The post Creating a Menu Image Animation on Hover appeared first on Codrops
UI Interactions & Animations Roundup #8
29.6.2020
A new collection of UI animation shots that summarizes the latest creative trends.
The post UI Interactions & Animations Roundup #8 appeared first on Codrops
Line-Animated Hamburger Menu
26.6.2020
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS.
CodePen Embed...
The Mad Magazine Fold-In Effect in CSS
25.6.2020
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to perfectly line...
Hide Scrollbars During an Animation
24.6.2020
CSS still can’t animate to auto dimensions.
.dropdown {
transition: 0.2s;
height: 0;
}
.dropdown.open {
/* the height will change, but it won't animate. */
height: auto;
}
There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back....
A Glitchy Grid Layout Slideshow
24.6.2020
An experimental grid slideshow with a stack-like navigation and glitch effect.
The post A Glitchy Grid Layout Slideshow appeared first on Codrops
An Overview of Scroll Technologies
22.6.2020
Scroll-related animations have been used on the web for years. In recent years, they’ve started to become more common, perhaps in part due to devices being higher-performing and thus able to handle more animation. 
There are a number of scroll related technologies out there, so this article’s...
Easing Animations in Canvas
19.6.2020
The <canvas> element in HTML and Canvas API in JavaScript combine to form one of the main raster graphics and animation possibilities on the web. A common canvas use-case is programmatically generating images for websites, particularly games. That’s exactly what I’ve done in a website...
Making Stagger Reveal Animations for Text
17.6.2020
A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js.
The post Making Stagger Reveal Animations for Text appeared first on Codrops
Making Stagger Reveal Animations for Text
17.6.2020
A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js.
The post Making Stagger Reveal Animations for Text appeared first on Codrops
Everything You Need to Know About FLIP Animations in React
16.6.2020
With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE).  Here’s a handy Pen where you can check which features your browser supports. The WAAPI is a nice way to do animation (that needs to be done in JavaScript) because...
A New Way to Delay Keyframes Animations
2.6.2020
If you’ve ever wanted to add a pause between each iteration of your CSS @keyframes animation, you’ve probably been frustrated to find there’s no built-in way to do it in CSS. Sure, we can delay the start of a set of @keyframes with animation-delay, but there’s no way to add time between...
UI Interactions & Animations Roundup #7
1.6.2020
Some modern UI animation shots to keep you up-to-date with the freshest trends.
The post UI Interactions & Animations Roundup #7 appeared first on Codrops
7 Examples of Scroll-Triggered Animations in Web Design
23.5.2020
These days it is quite difficult to imagine a modern website without any dynamic elements. Small, big, medium-sized they — will be there on many websites. Web user interfaces...
The post 7 Examples of Scroll-Triggered Animations in Web Design appeared first on Onextrapixel
UI Interactions & Animations Roundup #6
14.5.2020
A hand-picked collection of superb UI inspiration from the past weeks.
UI Interactions & Animations Roundup #6 was written by Mary Lou and published on Codrops
CSS Animation Timelines: Building a Rube Goldberg Machine
12.5.2020
If you’re going to build a multi-step CSS animation or transition, you have a particular conundrum. The second step needs a delay that is equal to the duration of the first step. And the third step is equal to the duration of the first two steps, plus any delay in between. It gets more...
Modern CSS Solutions for Old CSS Problems
11.5.2020
This is a hell of a series by Stephanie Eckles. It’s a real pleasure watching CSS evolve and solve problems in clear and elegant ways.
Just today I ran across this little jab at CSS in a StackOverflow answer from 2013.
This particular jab was about CSS lacking a way to pause between...
Click Once, Select All; Click Again, Select Normally
29.4.2020
A bonafide CSS trick from Will Boyd!
Force all the content of an element to be selected when clicked with user-select: all;
If you click a second time, let the user select just parts of the text as normal.
Second click? Well, it’s a trick. You’re really using a time-delayed...