Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
SVG animation

18 Articles
{
,

}
Direct link to the article Digging Into the Preview Loading Animation in WordPress
css animation loader SVG animation WordPress

Digging Into the Preview Loading Animation in WordPress

WordPress shipped the Block Editor (aka Gutenberg) back in version 5.0 and with it came a snazzy new post preview screen that shows the WordPress logo drawing itself while the preview loads.…

Avatar of Geoff Graham
Geoff Graham on Oct 22, 2019
Direct link to the article Animating with Clip-Path
animation clip-path SVG animation

Animating with Clip-Path

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 …

Avatar of Travis Almand
Travis Almand on Jul 9, 2019
Direct link to the article Animate a Blob of Text with SVG and Text Clipping
blobs SVG SVG animation

Animate a Blob of Text with SVG and Text Clipping

I came across this neat little animation in a designer newsletter. Unfortunately, I lost track of the source, so please give a shout out if you recognize it! It’s by Martí Fenosa.

In it, a block of text appears …

Avatar of Zach Saucier
Zach Saucier on Feb 6, 2019 (Updated on Apr 6, 2020)
Direct link to the article Creating an Animated Login Form for TouchID
forms native-like animation SVG animation touch

Creating an Animated Login Form for TouchID

I came across this amazing Dribbble shot by Jakub Reis a while back. It caught my eye and I knew that I just had to try recreating it in code. At that moment, I didn’t know how. I tried out …

Avatar of Kirill Kiyutin
Kirill Kiyutin on Dec 11, 2018
Direct link to the article Creating a Panning Effect for SVG
SVG SVG animation

Creating a Panning Effect for SVG

Earlier this month on the Animation at Work Slack, we had a discussion about finding a way to let users pan inside an SVG.…

Avatar of Louis Hoebregts
Louis Hoebregts on Apr 18, 2018
animation GreenSock logo Morph MorphSVG MorphSVG Plugin SVG SVG animation

The Making of the CSS-Tricks Logo Easter Egg Animation

When Chris first started the CSS-Tricks redesign, he came to me with some screenshots of the direction it was headed in, and suggested that I make an animation for the logo as part of the design refresh. I was excited …

Avatar of Sarah Drasner
Sarah Drasner on Nov 6, 2015 (Updated on Nov 7, 2015)
animation shape morphing SMIL SVG animation

23: Animating SVG with SMIL

Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but …

Avatar of Chris Coyier
Chris Coyier on Oct 18, 2014 (Updated on Sep 4, 2018)
  • Newer
  • 1
  • 2

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top