Pens from Tony Tomlinson https://codepen.io/ibb/ en nospam@codepen.io Copyright 2024 2015-08-25T18:26:33-07:00 Lazy Line Painter - Animating Cell Tower Company Logo https://codepen.io/ibb/pen/oXrbar https://codepen.io/ibb/pen/oXrbar Tony Tomlinson

See the Code - See it Full Page - See Details

This is a quintessential LLP SVG Animation / Drawing. There are nearly 50 svgData sets, approximately 384 individual paths which are animated with perfect timing, some sequentially, others simultaneously, with varying durations, delays, strokeWidths, strokeColors, strokeCaps, strokeJoins. It is responsive - mobile friendly and pixel perfect every time. Hope everyone digs it - pm me if you have any questions on structuring your SVG animation as this first stab at it took me nearly a week (couldn't find a ton of documentation or demos ~ hence my putting it out to the world via CODEPEN!

]]>
Lazy Line Painter - Animating Cell Tower Company Logo 2015-08-25T18:26:33-07:00
Animated SVG Close X https://codepen.io/ibb/pen/oXyZbV https://codepen.io/ibb/pen/oXyZbV Tony Tomlinson

See the Code - See it Full Page - See Details

]]>
Animated SVG Close X 2015-07-14T10:28:13-07:00
Material Nav Header w/ 2 Submenus of Hierarchical Timed Dropdowns https://codepen.io/ibb/pen/zGaoVB https://codepen.io/ibb/pen/zGaoVB Tony Tomlinson

See the Code - See it Full Page - See Details

Building on Cole's aligned dropdowns - I've added a CSS transform & transition on the dropdowns along with a hierarchical timed transform for displaying each of the subnav links. Forked from [Cole Waldrip](http://codepen.io/colewaldrip/)'s Pen [Material Nav Header w/ Aligned Dropdowns](http://codepen.io/colewaldrip/pen/KpRwgQ/).

]]>
Material Nav Header w/ 2 Submenus of Hierarchical Timed Dropdowns 2015-07-14T11:33:46-07:00
Material Nav Header w/ Hierarchical Timed Dropdowns https://codepen.io/ibb/pen/yNjmOP https://codepen.io/ibb/pen/yNjmOP Tony Tomlinson

See the Code - See it Full Page - See Details

Building on Cole's aligned dropdowns - I've added a CSS transform & transition on the dropdowns along with a hierarchical timed transform for displaying each of the subnav links.

]]>
Material Nav Header w/ Hierarchical Timed Dropdowns 2015-07-12T22:58:40-07:00
Building Images https://codepen.io/ibb/pen/eNeNWy https://codepen.io/ibb/pen/eNeNWy Tony Tomlinson

See the Code - See it Full Page - See Details

Working on doing the opposite of what Szenia did and also in a given direction. Forked from [Szenia Zadvornykh](http://codepen.io/zadvorsky/)'s Pen [Shattering Images](http://codepen.io/zadvorsky/pen/dILAG/). Forked from [Zach Saucier](http://codepen.io/Zeaklous/)'s Pen [Building Images](http://codepen.io/Zeaklous/pen/raltF/). Forked from [Zach Saucier](http://codepen.io/Zeaklous/)'s Pen [Building Images](http://codepen.io/Zeaklous/pen/raltF/).

]]>
Building Images 2015-06-23T02:26:22-07:00
Material Design Hierarchical Timed Expanding Overlay Grayscale https://codepen.io/ibb/pen/mJrEME https://codepen.io/ibb/pen/mJrEME Tony Tomlinson

See the Code - See it Full Page - See Details

Duplicate of my other Pen http://codepen.io/ibb/pen/BNzxPb except I added in a grayscale that changes on hover

]]>
Material Design Hierarchical Timed Expanding Overlay Grayscale 2015-05-23T10:51:53-07:00
Material Design Hierarchical Timed Expanding Overlay Flexbox Sections https://codepen.io/ibb/pen/BNzxPb https://codepen.io/ibb/pen/BNzxPb Tony Tomlinson

See the Code - See it Full Page - See Details

Originally inspired by Ettrics pen @ http://codepen.io/ettrics/pen/ZYqKGb Done almost entirely in Flexbox CSS... only 55 lines of JS 6 working examples with different # of total sections in each

]]>
Material Design Hierarchical Timed Expanding Overlay Flexbox Sections 2015-05-23T10:52:54-07:00
Material Timing Motion https://codepen.io/ibb/pen/VLYyga https://codepen.io/ibb/pen/VLYyga Tony Tomlinson

See the Code - See it Full Page - See Details

Practice to coding timing animation Forked from [Dark](http://codepen.io/slightlove/)'s Pen [Material Timing Motion](http://codepen.io/slightlove/pen/myYaKQ/).

]]>
Material Timing Motion 2015-04-27T18:00:09-07:00
Material Design App - Animated Tabs https://codepen.io/ibb/pen/jPNXyp https://codepen.io/ibb/pen/jPNXyp Tony Tomlinson

See the Code - See it Full Page - See Details

Hello Everyone! I loved Material Design and I developed the following polymer app without Canvas and Polymer. You can use Only CSS3 - Pure Javascript! I hope you like it :) http://www.polymer-project.org/samples/tutorial/finished/index.html Forked from [keremciu](http://codepen.io/keremciu/)'s Pen [Material Design App - Animated Tabs](http://codepen.io/keremciu/pen/EgGcu/).

]]>
Material Design App - Animated Tabs 2015-04-20T16:26:43-07:00
Infinite tunnel https://codepen.io/ibb/pen/jEjebW https://codepen.io/ibb/pen/jEjebW Tony Tomlinson

See the Code - See it Full Page - See Details

Wow I just fall in love with ThreeJs I think... Forked from [Louis Hoebregts](http://codepen.io/Mamboleoo/)'s Pen [Infinite tunnel](http://codepen.io/Mamboleoo/pen/emazBa/).

]]>
Infinite tunnel 2015-04-11T21:43:23-07:00