Pens from Nathan Gordon https://codepen.io/gordonnl/ en nospam@codepen.io Copyright 2024 2020-05-27T14:26:40-07:00 Magenta Bubble https://codepen.io/gordonnl/pen/GRpaBYM https://codepen.io/gordonnl/pen/GRpaBYM Nathan Gordon

See the Code - See it Full Page - See Details

Just an experiment with multi step border-radius values and background-positioning.

]]>
Magenta Bubble 2020-05-27T14:26:40-07:00
Horizontal Scroll Test https://codepen.io/gordonnl/pen/RwNPbNr https://codepen.io/gordonnl/pen/RwNPbNr Nathan Gordon

See the Code - See it Full Page - See Details

]]>
Horizontal Scroll Test 2019-12-11T12:38:55-07:00
Wind https://codepen.io/gordonnl/pen/paOOoZ https://codepen.io/gordonnl/pen/paOOoZ Nathan Gordon

See the Code - See it Full Page - See Details

]]>
Wind 2020-02-25T18:56:04-07:00
Link's Expressions https://codepen.io/gordonnl/pen/XpOzXd https://codepen.io/gordonnl/pen/XpOzXd Nathan Gordon

See the Code - See it Full Page - See Details

https://medium.com/@gordonnl/links-expressions-eb7beae2c62c

]]>
Link's Expressions 2018-07-19T12:37:32-07:00
Dynamic Fire and Haze https://codepen.io/gordonnl/pen/Lxbvmq https://codepen.io/gordonnl/pen/Lxbvmq Nathan Gordon

See the Code - See it Full Page - See Details

]]>
Dynamic Fire and Haze 2017-01-19T20:30:46-07:00
Static Fire and Haze https://codepen.io/gordonnl/pen/gLqmrK https://codepen.io/gordonnl/pen/gLqmrK Nathan Gordon

See the Code - See it Full Page - See Details

]]>
Static Fire and Haze 2017-01-19T20:29:56-07:00
Ocean https://codepen.io/gordonnl/pen/aBXpMd https://codepen.io/gordonnl/pen/aBXpMd Nathan Gordon

See the Code - See it Full Page - See Details

]]>
Ocean 2017-01-19T20:31:11-07:00
ThreeJS Template https://codepen.io/gordonnl/pen/woNWNx https://codepen.io/gordonnl/pen/woNWNx Nathan Gordon

See the Code - See it Full Page - See Details

]]>
ThreeJS Template 2017-01-19T20:31:45-07:00
SVG Mask Animation https://codepen.io/gordonnl/pen/zoqEBb https://codepen.io/gordonnl/pen/zoqEBb Nathan Gordon

See the Code - See it Full Page - See Details

]]>
SVG Mask Animation 2016-11-13T03:32:56-07:00
Howl's Moving Castle https://codepen.io/gordonnl/pen/RwOYEQ https://codepen.io/gordonnl/pen/RwOYEQ Nathan Gordon

See the Code - See it Full Page - See Details

This is a tribute to Studio Ghibli's Exhibition in Paris. While walking through the exhibit, I learned that the castle in howl's moving castle was actually animated with a computer. I was surprised, and inspired to recreate this famous scene using web technologies that I'm familiar with, allowing the user to control the castle's movement. I ended up biting off more than I could chew, and spending much longer than I had initially intended. To achieve it, I cut all of the elements out of the film itself using photoshop to crop certain frames. I then inserted all of the elements directly to the DOM (no canvas) and animated them using GSAP and an epic amount of timelines. The legs' walk cycle were by far the most difficult part. I did not use any other software for the animation, just good old sublime text! All rights go to Studio Ghibli and Joe Hisaishi for the audio.

]]>
Howl's Moving Castle 2014-10-30T23:27:49-07:00