Paper Toy Web Site Launches

My paper toy web site has now launched! This site features 37 of my paper toys all together in one seamless interface with links to the free PDF template.

Go to the site: www.chemicalnine.com/papertoys

Although I will always add new toys here first, I wanted to experiment with HTML5 and CSS3 transforms animated using GreenSock's GSAP JS. I thought a paper toy micro site would be the perfect opportunity to do this.

Screen cap of a selected toy and image gallery. The toys are currently divided into 6 categories. (Monsters, Famous Characters, Halloween, Halloween & Fall, Robots & Scifi, and Kids)

Once you select a category, the thumbnails of the toy load to the left and you drag and drop them into the selection area. (I did this to with jQuery UI, and used jQuery as the overall selectors)

My goal with the drag and drop was to use it in conjunction with GreenSock's GSAP JS.

Screen cap of the opening animation of the "Begin" mechanism. 

Screen cap of the welcome screen, after the interface loads by clicking "begin" on the previous screen. (pictured above)

Screen cap of the Monsters section title screen. Thumbnails of the image gallery and template will load after the
main monster thumbnail is dragged and dropped into the Drop target area.

Screen cap of the template image with link to the template PDF.

The site is an experiment with HTML and JavaScript animation.  I have spent over a decade creating Flash animation, web sites, presentations and media. Over the past year I have almost completely stopped using Flash and been creating similar projects using HTML5, CSS3 & JavaScript.

Go to the site: www.chemicalnine.com/papertoys

The site was developed using:

• GreenSock's GSAP JS (animation / tweening)
• Adobe Illustrator and Photoshop (design, interface, photo processing
• jQuery (as the element selector and some general functionality)
• jQuery UI (for the drag and drop)
• QueryLoader2 (pre-load of initial site)
• Adobe Dreamweaver for assembly
• JavaScript, HTML, CSS3