Pens from Nathan Long https://codepen.io/nathanlong/ en nospam@codepen.io Copyright 2024 2023-11-03T19:38:31-07:00 Blurry 60° Gradient Morphing Blob https://codepen.io/nathanlong/pen/JjwZrBg https://codepen.io/nathanlong/pen/JjwZrBg Nathan Long

See the Code - See it Full Page - See Details

Attempting to apply blur to the spline blob method.

]]>
Blurry 60° Gradient Morphing Blob 2023-09-28T18:55:38-07:00
Brainwave Blobs with Splines https://codepen.io/nathanlong/pen/GRPdzxr https://codepen.io/nathanlong/pen/GRPdzxr Nathan Long

See the Code - See it Full Page - See Details

Slow, undulating blob effect with outlines that mimic some brainwave graphs. Shout out to @georgedoescode for the fantastic catmull-rom spline library (fancy math to plot a line smoothly between points) and the inspiration for this pen!

]]>
Brainwave Blobs with Splines 2023-11-03T19:38:31-07:00
Screen Shake on Collision https://codepen.io/nathanlong/pen/jOXLZzV https://codepen.io/nathanlong/pen/jOXLZzV Nathan Long

See the Code - See it Full Page - See Details

Tap on the shapes to send them flying, once they collide the screen will shake based on the mass of the shapes. This was an attempt to see if I could recreate the pause-and-shake effect from Smash Bros like Masahiro Sakurai describes here: https://www.youtube.com/watch?v=2JXR7IASSog

]]>
Screen Shake on Collision 2023-09-15T14:03:25-07:00
Pixi Scrolling Bubbles https://codepen.io/nathanlong/pen/eYbYyQK https://codepen.io/nathanlong/pen/eYbYyQK Nathan Long

See the Code - See it Full Page - See Details

Using Pixi.js to create a field of swirling bubbles that respond to page scroll. I intended this to sit as a background element behind content to provide some interest to a page. It has some methods built in to respond to theme changes as well.

]]>
Pixi Scrolling Bubbles 2023-08-21T14:16:16-07:00
PIXI Crawling Orbs / Lava Lamp https://codepen.io/nathanlong/pen/PoxrEOJ https://codepen.io/nathanlong/pen/PoxrEOJ Nathan Long

See the Code - See it Full Page - See Details

The lava-lamp no one asked for. I was trying to create amorphous orb effect and found a way to do it with sprites. A lot of this code was lifted unceremoniously from the PIXI docs and smushed together with my own.

]]>
PIXI Crawling Orbs / Lava Lamp 2023-08-18T18:31:14-07:00
Fade In On Scroll with Vanilla JavaScript https://codepen.io/nathanlong/pen/eYQoRQo https://codepen.io/nathanlong/pen/eYQoRQo Nathan Long

See the Code - See it Full Page - See Details

Reusable motion pattern for fading in elements once they enter the viewport by scrolling using intersectionObserver and Web Animations API (WAAPI) to trigger and power the animations.

]]>
Fade In On Scroll with Vanilla JavaScript 2023-08-09T15:03:04-07:00
Noise function https://codepen.io/nathanlong/pen/gOQbxdd https://codepen.io/nathanlong/pen/gOQbxdd Nathan Long

See the Code - See it Full Page - See Details

]]>
Noise function 2023-06-08T19:26:17-07:00
WIP: Web Audio API Bells https://codepen.io/nathanlong/pen/BaqdJWX https://codepen.io/nathanlong/pen/BaqdJWX Nathan Long

See the Code - See it Full Page - See Details

]]>
WIP: Web Audio API Bells 2023-05-09T14:36:26-07:00
CSS Heartbeat Animation https://codepen.io/nathanlong/pen/abayBej https://codepen.io/nathanlong/pen/abayBej Nathan Long

See the Code - See it Full Page - See Details

I needed a relatively straightforward heartbeat animation. But a heart doesn't just go ba-DUMP, theres a crazy amount of stuff going on in there: https://www.youtube.com/watch?v=yPWFK_ejkww I'm trying to get the secondary pump action with the skew function, it's not great but it's OK...

]]>
CSS Heartbeat Animation 2023-03-06T15:26:02-07:00
Animated Number Counter on Scroll with Vanilla Javascript https://codepen.io/nathanlong/pen/NWLWXXx https://codepen.io/nathanlong/pen/NWLWXXx Nathan Long

See the Code - See it Full Page - See Details

Uses intersectionObserver and some javascript to count numbers up from 0 when they enter the frame. Intended to be used with statistic style components. Accounts for decimals and commas.

]]>
Animated Number Counter on Scroll with Vanilla Javascript 2023-02-23T23:45:27-07:00