Velocity is a jQuery plugin that re-implements $.animate() to produce 20 times the performance (making Velocity faster than CSS animations) while including several new features to improve animation workflow.
It’s been a while since I created RaphCon, a little mashup library based on jQuery and Raphael.js, that let’s you create and animate vector icons (See the vector icons on shuttlestudio.de for a little demo). With the recent hype around Web Components and the renaissance of a more declarative approach to UI web frameworks (e.g. angular.js, polymer.js or x-tag) I thought about revisiting the idea of animatable vector graphics inside the browser.
Additionally I’ve also been working with UI technologies like XAML recently. Just like the concept of data binding that has been adopted by the open web recently I think one can also learn some lessons from this technology stack when it comes to working with vector graphics. So I asked myself: Is it possible to do similar stuff inside the browser with the help of SVG, especially inline SVG?
What I like about inline SVG
- Inline SVG can also easily be styled and animated with the help of CSS. Changing colors dynamically, transforming and translating subpaths. You name it.
- It’s even possible to embed bitmap images as base64 strings
- SVG filters. This gives you a tool set to apply photoshop like effects to SVG graphics.
My initial idea was to use polymer as a polyfill for being able to create custom HTML elements that could enable to describe interactive vector graphics and icons…
Blue sky thinking: Polymer, inline SVG and snap.svg could be the perfect ingredients for an interesting UI-Stack.
— Matthias Wagler (@mattwagl) January 13, 2014
However after playing with polymer for a little while I started to run into problems. The examples didn’t work as expected and I wasn’t able to create custom tags that communicated with each other as easily as I expected. So I switched to angular.js to bootstrap my ideas.
A very rough proof of concept
<icon width="128" height="128"> <icon-state triggers="default mouseleave"> <svg> ... </svg> </icon-state> <icon-state triggers="mouseenter"> <svg> ... </svg> </icon-state> </ng-ollie-icon-state>
The result: ng-ollie
I’ve created a little angular module called ng-ollie (to pay tribute to Ollie Johnston). I’ve put together a very simple demo gist to illustrate the concept. I’ve absolutely no idea where this will end up if I’m able to find the time I’ll try to play with it. Feedback is highly appreciated!
“From the drawing data obtained from the iPad we then projected their drawings as a 3D visualisation throughout the night.”
Michael Surtees about the concept, idea and execution of a website for different devices and gadgets, starting with a tablet pc to a mobile device to a standard computer (screen). Interesting how the way of screen design and usability is changing with the boost of touch screen devices. – Designing for the Browser of Today
Having spent most of 2010 designing with the interactions of an iPad in mind, I chose to design Gesture Theory’s site with the iPad browser in mind first, desktop browser second and change the context of the site’s use for a mobile browser. Thinking about the iPad first meant killing hover states, killing scrolling (just a personal preference), emphasizing swiping (right to left), killing the home screen (kept it for mobile) and trying to make it lightweight as possible. Something has worked – we have less than a 3 % bounce rate. Once the design was ready for the iPad it was a pretty easy configure it to the desktop browser. Right now things work just on tap, we’re trying to get it to swipe but haven’t been happy with the jerky results so far.
Avoid self doubt – You probably don’t even know what skills you need, so don’t worry about it. Start with what you already know.