Tags: animation

Obnoxious.css [↗]

Animations for the strong of heart, and weak of mind.

Eww! These animations really are obnoxious, but I guess they could serve a purpose.

Animated Bézier Curves [↗]

Some nifty interactive animations that show how Bézier curves work.

Creepy Particle Emitter

I’ve been playing around on CodePen again. To be honest, I have no reason for posting this pen, besides from thinking that it looks creepy cool. Go full screen for maximum creep factor.

See the Pen HTML5 Canvas Particle Emitter #2 by Philip Newborough (@corenominal) on CodePen.

SVG logo animation: Man on a rock, floating in space, waving

I was looking at my site’s SVG logo and I thought to myself, it’d be cool if the little dude would offer up a little waving arm. So, I played around with some JavaScript and came up with the following pen.

See the Pen Man on a rock, floating in space, waving by Philip Newborough (@corenominal) on CodePen.

I’ve got no idea if the above is a valid method for animating a SVG, but it seems to work and I think it looks cool. I’ll probably use it with the mouseover and mouseout events, like the following pen.

See the Pen Man on a rock, floating in space, waving: hover by Philip Newborough (@corenominal) on CodePen.

SVG Line Animation for the Uninitiated [↗]

Today, we’re going to be animating an illustration created in Adobe Illustrator, using SVG and CSS. We’ll use a technique popularized by Polygon in their reviews of the Playstation 4 and Xbox One.

Good tutorial and nice effect, shame about the lack of IE support (although not a huge problem these days). Also, see vivus.js for similar animation effects.

Letter Effects [↗]

An inspirational set of letter animations for display typography powered by anime.js


Easing Functions Cheat Sheet [↗]

Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

This page helps you choose the right easing function.

I love the example animations, they make choosing the right easing function really easy.

Obsessive GIF Artist Al Boardman on the Importance of Personal Projects [↗]

Al Boardman, prolific GIF-creator and expert animator, has created motion graphics for an impressive list of famous brands (including Nike, IBM, and Twitter). His signature style is simple yet sophisticated, with a color palette and a smoothness that sucks the viewer in.

Al Boardman’s GIFs are both wonderful and inspirational; after browsing his collection, I feel like I want to do less coding and more designing. I’m thinking that I might have another play with my site’s design soon. The current minimal design is nice, but not much fun.

At the start, I had no clients, no contacts and no work, but I eventually picked up a few low-paid bits and bobs from startups around the city. It didn’t lead to much, so, I decided to try a different approach, and one that I’d recommend highly. I stopped chasing low-paid work that I didn’t particularly want to do and focused on creating work for myself.

Oh, and the interview is a pretty good read too.

baffle.js [↗]

A tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements.

I like this a lot. It’s very hacker-esque (if there is such a thing) and reminds me of the effect used in the Sneakers movie. Very nifty.

Create an impress.js Presentation in 10 Minutes [↗]

Looking to liven up your next presentation with a platform that’s more dynamic and engaging than PowerPoint? Try impress.js, a presentation framework that uses captivating image transitions and transformations based in CSS3.

I really dislike PowerPoint, so this looks pretty good to me.

◀ Older