Search
Playing With Particles Using the Web Animations API
18.3.2020
When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can.
In this post, we'll make even more particle magic using the Web Animations API to create...
4 Ways to Animate the Color of a Text Link on Hover
3.3.2020
Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.
There are four different techniques we can use to do this. Let’s look at those while being mindful of important things, like accessibility, performance,...
UI Interactions & Animations Roundup #4
2.3.2020
A fresh dose of inspiration to get you updated on the latest UI animation and interaction trends.
UI Interactions & Animations Roundup #4 was written by Mary Lou and published on Codrops
UI Interactions & Animations Roundup #3
10.2.2020
The latest collection of interesting and modern UI interaction and animation concepts.
UI Interactions & Animations Roundup #3 was written by Mary Lou and published on Codrops
Resizing Values in Steps in CSS
30.1.2020
There actually is a steps() function in CSS, but it's only used for animation. You can't, for example, tell an element it's allowed to grow in height but only in steps of 10px. Maybe someday? I dunno. There would have to be some pretty clear use cases that something like background-repeat: space...
Use and Reuse Everything in SVG… Even Animations!
28.1.2020
If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your code with <use> element, CSS Variables and...
UI Interactions & Animations Roundup #2
25.1.2020
Some selected shots of great UI interactions and animation for your inspiration.
UI Interactions & Animations Roundup #2 was written by Mary Lou and published on Codrops
UI Interactions & Animations Roundup #1
4.1.2020
The first roundup that collects inspirational UI interactions and animations.
UI Interactions & Animations Roundup #1 was written by Mary Lou and published on Codrops
15 Examples of SVG Animations for Web Designers
26.12.2019
SVG (Scalable Vector Graphics) has a number of advantages compared to other image formats used on the web. First and foremost, SVGs are scalable therefore can adapt to any...
The post 15 Examples of SVG Animations for Web Designers appeared first on Onextrapixel
Playing Sounds with CSS
25.11.2019
CSS is the domain of styling, layout, and presentation. It is full of colors, sizes, and animations. But did you know that it could also control when a sound plays on a web page?
This article is about a little trick to pull that off. It’s actually a strict implementation of the HTML and CSS,...
Let’s Make a Fancy, but Uncomplicated Page Loader
15.10.2019
It’s pretty common to see a loading state on sites these days, particularly as progressive web apps and reactive sites are on the rise. It’s one way to improve "perceived" performance — that is, making it feel as though the site is loading faster than it actually is.
There’s no shortage of ways...
Weaving One Element Over and Under Another Element
14.10.2019
In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The Bible Project’s website. They make really cool animations, and...
Stop Animations During Window Resizing
14.10.2019
Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they have to do with size of the page or position or padding or something. It doesn't really matter what it is, the fact that the transition...
How to Create an Interactive 3D Character with Three.js
14.10.2019
In this in-depth tutorial you will learn how to create an interactive 3D character that follows the mouse and performs random animations on click.
How to Create an Interactive 3D Character with Three.js was written by Kyle Wetton and published on Codrops
Using Custom Properties to Wrangle Variations in Keyframe Animations
12.9.2019
Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would so nice to drop yet one more dependency and go with vanilla CSS.
Well, I found a way to account for variations within...
A Configurator for Creating Custom WebGL Distortion Effects
4.9.2019
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
A Configurator for Creating Custom WebGL Distortion Effects was written by Daniel Velasquez and published on Codrops
CSS prefers-reduced-motion Media Query
30.7.2019
When I started in the web development industry, media queries were limited — screen and print were the two media queries I was most often using. More than a decade later, media queries have advanced to various screen units, feature checking, and even color scheme preference. I’ve been...
CSS Animation Libraries
22.7.2019
There are an awful lot of libraries that want to help you animate things on the web. These aren't really libraries that help you with the syntax or the technology of animations, but rather are grab-and-use as-is libraries. Want to apply a class like "animate-flip-up" and watch an element, uhhh...
How to Add Smooth Scrolling with Inner Image Animations to a Web Page
10.7.2019
A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.
How to Add Smooth Scrolling with Inner Image Animations to a Web Page was written by Mary Lou and published on Codrops
Animating with Clip-Path
9.7.2019
clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes...