Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: animation

anime.js image/svg+xml

Anime (/ˈæn.ə.meɪ/) is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.

There are lots of JavaScript animation libraries on the web, but this one looks a bit special. I’m looking forward to having a play with it.

AOS – Animate on scroll library image/svg+xml

Small library to animate elements on your page as you scroll.

You may say it’s like WOWJS, yeah – you’re right, effect is similar to WOWJS, but i had different idea how to make such a plugin, so here it is. CSS3 driven scroll animation library. It’s even smaller than already small WOWJS library.

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, element will animate to it’s previous state and is ready to animate again if you scroll down.

A nice looking library, I like the separation of logic (JavaScript) and animations (CSS). See also a detailed blog post by the author on CSS-Tricks.

Barba.js image/svg+xml

barba.js is a small (4.4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website’s pages.

It helps reducing the delay between your pages, minimizing browser HTTP requests and enhancing your user’s web experience.

I kind of like the idea of these push state transitions, but I don’t come across many websites that use them, apart from the occasional arty portfolio site.

HTML5 Canvas Particle Emitter

A while back, I had a lot of fun creating some basic HTML5 canvas particle emitters. I don’t know why, but I love hacking on these things. They’re not particularly useful, but they are kind of mesmerising. Below is the first one I created — view full screen here.

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