aetles + animation   35

Animations for the strong of heart, and weak of mind.
css  animation  fun  webdevelopment 
may 2017 by Aetles
txt.wav demos
some weird text animations the internet deserves.
webdevelopment  text  animation 
september 2016 by Aetles
Cool CSS Text Effects - 20 Amazing Examples
CSS3 is considered to be a true revolution when it comes to web development. The new properties contained in CSS3 allow developers to visually enhance their designs in such a way that is not only impressive in a visual sense, but is also quick and easy.
Web typography is one major thing that has dramatically changed with CSS3. You can make your design look attractive with typography and make everything visually appealing.
When it comes to web design, CSS will help you to obtain many different font effects, including using such effects as animation and clipping to spice things up a bit.
To help further illustrate this, we’ve put together a list of effects that are visually stunning and beautiful, all of which are made possible through CSS, and some of them with a little bit of Javascript as well.
css  text  webdesign  animation  typography  webdevelopment 
september 2016 by Aetles
Hay Festival 2016: How to build Gromit — an Aardman expert's guide
 Beneath the squidgy exterior, Wallace’s dog has nerves  of steel, reveals Aardman animator Merlin Crossingham

In the Wallace and Gromit films, stuff happens to Wallace but Gromit is the hero. You experience the world through him. He throws a knowing look; he always figures stuff out. There was a poster we did for one of the films that had the word “mastermind” across it. The “master” bit was by Wallace, the “mind” by Gromit, which neatly summarises their relationship.

This is my 21st year at Aardman. I’ve been working on Wallace & Gromit since 2000 when we started making the Curse of the Were-Rabbit and I’m now creative director for the films involving these characters, so I’ve known them for quite a while.
animation  movies 
may 2016 by Aetles
A Comparison of Animation Technologies | CSS-Tricks
The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.

If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to use and how to use it.

There’s no possible way to go over every single animation library around, so I’m going to stick with the ones that I’ve either used or that interest me. Please keep in mind that these are my recommendations based on my own experiences, and the web has a lot of grey area, so you may have a different experience or opinion. That’s OK.

css  javascript  animation  svg 
may 2016 by Aetles
bryanbraun/after-dark-css - CSS
Do you longingly reminisce about the days when flying toasters graced your screen? Do words like "Confetti Factory" and "Daredevil Dan" make your heart skip a beat?

If so, then never fear --- CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers.

The animations were made with CSS alone. No animated gifs or javascript.
apple  css  animation  nostalgia  mac 
january 2016 by Aetles
Animation in Responsive Design ◆ 24 ways
Animation and responsive design can sometimes feel like they’re at odds with each other. Animation often needs space to do its thing, but RWD tells us that the amount of space we’ll have available is going to change a lot. Balancing that can lead to some tricky animation situations.

Embracing the squishiness of responsive design doesn’t have to mean giving up on your creative animation ideas. There are three general techniques that can help you balance your web animation creativity with your responsive design needs. One or all of these approaches might help you sneak in something just a little extra into your next project.
css  design  animation  rwd  responsivedesign  javascript  webdevelopment 
december 2015 by Aetles
mo · js - Motion Graphics For The Web
Silky smooth animations and effects for staggering user's experience.
Retina Ready
Screen density independent effects look good on any device.
Simple declarative APIs to master your motion project with ease.
Custom build for the current project's needs. Bye bye large file size overheads.
1100+ unit tests and ci techniques help us to carve & backstrap the reliable tool.
Open Sourced
Great growing community refines mo· js fast and ships frequently.
design  javascript  library  js  animation  webdevelopment 
november 2015 by Aetles
JavaScript library to create physics-based CSS animations
javascript  animation  motion  webdevelopment 
june 2015 by Aetles
Motion Blur Effect with SVG | Codrops
A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.
css  design  animation  svg  webdevelopment 
april 2015 by Aetles
Hover.css - A collection of CSS3 powered hover effects
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
css  animation  webdevelopment  css3 
january 2015 by Aetles
snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices.

snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that will let the user make smooth animations without needing to know too much about browser rendering.

Note: For convenience, width and height are animatable too, but beware since they may cause page reflows and slow down your animations.
css  javascript  jquery  js  animation 
january 2015 by Aetles
bounce.js lets you create tasty CSS3 powered animations in no time.
css  css3  animation  webdevelopment 
june 2014 by Aetles – Open Collection of GLSL Transitions
What is
The initiative aims to build an Open Collection of GLSL Transitions. It aims to be highly community-driven and free-software.

What is a "GLSL Transition"?
A GLSL Transition is a Transition performed using OpenGL Shading Language (GLSL). A Transition is an Animation Effect moving from one image to another.

GLSL is efficient because it compiles to the graphic card and is very powerful, not limited to simple transformations, but with unlimited possible draw (in a functional way). Also, GLSL is available not only for the Web in recent browsers but also in native environnement via OpenGL.

For which use case?
You may need GLSL Transitions for making web image animations (e.g. a slideshow) or for transitions in a Video Editing Software.
css3  animation  webgl  opengl  webdevelopment 
may 2014 by Aetles
Parallax Done Right — Medium
Parallax has become, for better or worse, an increasingly popular web trend. The first parallax site I ever saw was Ian Coyle’s BetterWorld for Nike. I was in love. At the time, I’d never seen the technique before. It felt like I’d left the web of PDF-esque static pages and entered the future.

Since then, parallax has blown up. It feels like every day there’s a new marketing page using the technique…and with good reason. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. It’s especially bad on devices with high pixel density like retina MacBook Pro’s.

I’ve played quite a bit with parallax sites and have come up with a non-comprehensive list of Do’s and Don’ts that will hopefully keep you on track to get killer performance.
css  javascript  animation  parallax  webdevelopment 
may 2014 by Aetles
Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow.
Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, Velocity uses jQuery's $.queue(), and thus interoperates seamlessly with jQuery's $.animate(), $.fade(), and $.delay(). Since Velocity's syntax is identical to $.animate()'s, none of your code needs to change.
Download Velocity, add it to your page, and replace all instances of $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on smartphones.
css  javascript  jquery  js  animation  webdevelopment 
may 2014 by Aetles
WOW.js - Reveal Animations When You Scroll. Very Animate.css Friend.
Reveal Animations When You Scroll. Very Animate.css Friend :-)
Easily customize animation settings: style, delay, length, offset, iterations...
css  javascript  scroll  js  animation  webdevelopment 
april 2014 by Aetles
CSS Shake
Some CSS classes to move your DOM!
css3  css  animation  webdevelopment 
march 2014 by Aetles
Simple CSS spinners animated with CSS, as showcased at See for browser support.
css  animation  spinner 
december 2013 by Aetles
Gifpop! Custom Gif Cards for Everyone.
Gifpop is a tool to make custom cards from animated gifs, using the magic of lenticular printing.
art  gif  print  animation  printing 
december 2013 by Aetles
The psychedelic and grotesque proto-GIFs of the 19th century | The Verge
Richard Balzer’s love affair began about 40 years ago, when he saw his first magic lantern — an early image projector invented in the 1600s. The experience would prove transformative.

"I was just stunned," he says. "I think I fell in love."

Balzer, a New York native, was working abroad as a photographer at the time, but the encounter kindled a dormant passion that would persist for decades. He began scouring for magic lanterns at flea markets across London and Paris, and soon expanded his collection as he learned more about early animation technology. Today, he has thousands of illustrations and machines at his Boston-area home, including phenakistoscopes, praxinoscopes, and zoetropes — all "optic toys" that were, in effect, the world’s first GIF-making machines.
gifs  animation  humor  art  history 
october 2013 by Aetles
BOX DEMO - .work | GMUNK

The piece was essentially grounded on the principles of Stage Magic, invoking five of the basic categorizations of Illusionary.. These Categories greatly informed the conceptual and aesthetic foundation and were fused with a graphic design aesthetic heavy in Minimalistic Form and Illuminated Geometry.. This direction was then placed into a projection-based Physical Installation, where all the 'magic' was captured live and in-camera, filmed documentary-style with no post effects or treatment; in essence the immense technology behind the curtain being completely masked from the viewer by the methods used to capture the performance.. This quote by Science-Fiction writer and Inventor Arthur C Clarke perfectly summarizes the film's foundation:

Any sufficiently advanced technology is indistinguishable from magic.
-Arthur C. Clarke
art  design  animation  impressive 
september 2013 by Aetles
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical.
javascript  js  animation  ui  parallax 
august 2013 by Aetles
magic css3 animations
Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible.
css  css3  animation  webdesign  webdevelopment 
june 2013 by Aetles
Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
api  javascript  drawing  animation 
may 2013 by Aetles
A Collection of Page Transitions | Codrops
Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.
Please note that this is just for showcasing some interesting effects and for inspiration. It is not a slider or anything like that. We’ll just apply some classes to make the page transition visible, not for navigating.
The CSS animations are divided into different sets, depending on what they do.
css  css3  webdesign  animation 
may 2013 by Aetles
Shape Shifter
Shape Shifter

An experiment by Kenneth Cachia.
css  font  animation 
may 2013 by Aetles
An explanation of the CSS animation on Apple's iPhone 4S webpage -- John B. Hall
An explanation of the CSS animation on Apple's iPhone 4S webpage

The "phone stage" (blue-bordered box) contains all 6 "slides" of the animation sequence and has a transition css property with a duration and timing function (a cubic bezier curve). For the phone stage to cycle from one slide to the next, its css transform property is updated with new translate and rotate values. At the end of the cycle, the phone stage's transition duration is temporarily set to 0ms while slide 6 resets to slide 1.

This demo only works in recent versions of safari, chrome, firefox, and opera. In the real version, the caption for each slide animates separately and the site degrades well in older browsers.
css  webdesign  animation  webdevelopment 
october 2011 by Aetles
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects.
If you don’t quite like the easing, grab a handle and fix it.
When you’re happy, snag your code and off you go.
Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out...yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!
css  css3  animation 
march 2011 by Aetles

Copy this bookmark: