Animation

Animation

35 bookmarks
Custom sorting
Clip Pathing Color Changes
Clip Pathing Color Changes
Let's look at a cool animated nav effect (from a recent post by Emil Kowalski) that uses CSS `clip-path` to move the highlighted nav item around. It's an interesting look at this CSS feature and adds a lot of polish to a simple idea.
Clip Pathing Color Changes
Animations on the web
Animations on the web
A course that teaches you how to craft animations that make people feel something.
Animations on the web
Incredible scroll-based animations with CSS-only
Incredible scroll-based animations with CSS-only
Been playing with them a little bit up until now, and it's finally time time for a deep dive into scroll-timeline and the scroll() and view() value functions...
Incredible scroll-based animations with CSS-only
Animated Drawings
Animated Drawings
Bring children's drawings to life, by animating characters to move around!
Animated Drawings
Scroll Animation - CSS-Tricks
Scroll Animation - CSS-Tricks
There are some scroll animations that are possible in CSS without any JavaScript at all. Just look at the chapter on the Scroll Indicator, which is clearly CSS magic. But we can do a lot of scroll animation work directly in CSS with just one little bit of information provided by JavaScript: how far the page has scrolled.
Scroll Animation - CSS-Tricks
TextEvo 2
TextEvo 2
TextEvo allows you to easily animate your text with delay based on letters, words or lines.
TextEvo 2
Lottie Lab
Lottie Lab
Create and edit lottie animations. The fastest way to build scalable and interactive animations for your websites and apps.
Lottie Lab
Animate.css | A cross-browser library of CSS animations.
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Animate.css | A cross-browser library of CSS animations.
Magic CSS animations
Magic CSS animations
Magic CSS are a set of simple animations to include in your web or app project's
Magic CSS animations
Expressive Animator
Expressive Animator
Create stunning 2D motion graphics and vector animations for any platform in a matter of minutes, whether you’re a beginner or a professional.
Expressive Animator
Swipey image grids.
Swipey image grids.
SVG isn't just useful for illustrative animation. It's hella handy for UI too.
Swipey image grids.
Animating with Lottie
Animating with Lottie
I believe animation on the web is not only fun, but engaging in such a way that it has converted site visitors into customers. Think of the “Like” button
Animating with Lottie
Animista
Animista
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
Animista
GreenSock
GreenSock
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
GreenSock
AnimXYZ
AnimXYZ
The first composable CSS animation toolkit
AnimXYZ
Animate.css | Just-add-water CSS Animations
Animate.css | Just-add-water CSS Animations
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Animate.css | Just-add-water CSS Animations
Keyframes
Keyframes
Keyframes helps you write better CSS with a suite of tools to create CSS @Keyframe animations, box shadows, colors, & more
Keyframes