CSS Animation Weekly #40 — SVG Line Morphing, WebGL spirals, prototyping and more

This week we’re learning how to animate our carousel steps, experimenting with WebGL scroll effects, and reading how animation can help our prototyping.

♥️

Donovan at CSSAnimation.rocks


Articles

Svg line animation on buttons poster

SVG Line Morphing Transition — www.uiplease.com

A very slick SVG animation for showing the transition between steps on a carousel.

Webglscrollspiral 800x600

WebGL Scroll Spiral — tympanus.net

Quite trip background effects created using WebGL (compatible browsers only). Scroll to see them twist and spiral.

Prototyping mobile UI animations: 5 inspiring examples

uxplanet.org

Learn how and why we should be prototyping our animations, along with some great examples.

Featured

Robmmdoxsymssawgal3a?1493567136

Ready to level up your CSS? — courses.cssanimation.rocks

As a thank you for being a CSS Animation Weekly reader, you can save 10% on the course from Donovan Hutchinson. (Use discount code weekly01)

Inspiration

Moon Rocks 🌚

cssanimation.rocks

An example of how Rellax.js can be used to create parallax effects on scroll.

Keys ⌨️

codepen.io

Subtle hover animation on this 3D keyboard rendered using HTML and CSS.

Pure CSS Vinyl Playing animation

codepen.io

Purse CSS animation of a record emerging and spinning up ⏺

explodal 💥

jessekorzan.github.io

This modal is just hilarious! Try it out 💥

Flux Capacitor ⚡🚗💨

codepen.io

A nifty 3D animated flux capacitor from the Back to the Future movies. Try dragging it around.

cog link with CSS variables (WebKit only)

codepen.io

Tidy example of how to use CSS variables in creating a spinning cog animation.

Animation in the real world

Og

Michele Angeloro — Interactive Digital Experiences — www.eien.tokyo 
 The work of Interactive Art Director and Designer Michele Angeloro.