Posts Categorized: Motion Graphic

Interactive Animations with SnapSVG

Posted by & filed under Motion Graphic, Web Design, Work.

snap

Turning a regular SVG image into an interactive animation is a breeze with SnapSVG. In this project an isometric illustration of an App has been made interactive and there are some nice animations that bring the project alive and make the interactions have meaning. The illustration is an exploded view image which is often found […]


Generative System 01

Posted by & filed under Images, Motion Graphic.

Processing Generative System 08

Using Processing to create large scale renders of animated agents, this generative drawing system uses networked connections to draw structures based on the movement of the agents through their individual life span. Here is a close up detail image: Here is a low res early version being drawn: Generative Drawing Particles 001 from Mark Shufflebottom […]


Interactive Panorama’s // WebGL + ThreeJS

Posted by & filed under Motion Graphic, Web Design, Work.

pano

This project uses WebGL and the popular ThreeJS library to create an interactive 360º panorama. This uses a large image mapped onto the inside of  a sphere then the camera is placed in the middle of this and as the user clicks and drags, they can navigate the room. The hover effect happens when the […]


WebGL Visual Scene Creation

Posted by & filed under Games, Motion Graphic, Web Design.

finished

This tutorial for Web Designer Magazine shows how to create a scene visually rather than just using code. The advantages are that objects can be placed visually and the scene built up and tweaked without constant fiddling with code. The scene is built in the ThreeJS editor using models brought in from Cinema4D but other […]


Introduction to interactive SVG’s with SnapSVG

Posted by & filed under Motion Graphic, Web Design, Work.

snap1

This project was a tutorial for Web Designer magazine to show how to make simple interactions with SnapSVG library, the successor to the popular but outdated RaphaelJS. This project has simple rollover animation that is created with a number of different methods from using JavaScript to CSS3 keyframe animation.


Create WebGL content with fallback to Canvas

Posted by & filed under Motion Graphic, Web Design.

flame

WebGL is well supported but there are a few browsers that don’t support it and on mobile/tablet the support is also sketchy. If you are planning on adding WebGL content and you are planning on using the ThreeJS framework, then help is at hand. ThreeJS can render as either Canvas or WebGL, as such with […]