abusedmedia

<meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-title" content="myapp">
<meta name="application-name" content="myapp">

abusedmedia

Horizontal slider with Impetus

This shows the technique to incorporate a common slider within a svg component using the wonderful library Impetus to handle momentum and rubber-band.

This example use a piece of code to create runtime the neccessary element to clip a content properly. The same thing can be set (avoiding the code) within Illustrator but at the cost of some issues and manual edits and other quirks outlined below.

Tweaks in Illustrator

To animate the masked content properly we need to tweak a little bit the svg since Illustrator export the svg without a proper structure.

abusedmedia

Header menu selector

Behaviors with d3.js, assets and document structure with svg generated from Illustrator/Sketch.

Test with your mobile device by clicking here

abusedmedia

Smooth state transition

State transition animation with d3.js, heavily inspired by this prototype from Framer.js

Test with your mobile device by clicking here

More info about the bundle here

abusedmedia

Guillotine menu transition

A quick prototype of the open/close menu transition with guillotine effect, seen first on this article.

Test with your mobile device by clicking here

abusedmedia

Simple mask technique to make a state transition

abusedmedia

var fs = require('fs'),
    request = require('request');
    src = require('./dataset.js');  //external array with url of images that need to be downloaded

var download = function(uri, filename, callback){

    request.head({url:uri, followAllRedirects: true}, function(err, res, body){

        console.log('content-type:', res.headers['content-type']);
        console.log('content-length:', res.headers['content-length']);

abusedmedia

Use Google Font in svg generated from Adobe Illustrator

abusedmedia

Simple push and release on element with d3.js, mobile ready.

More info about the bundle here

abusedmedia

HAR Abstractor