Chris Gannon

Glass Sakura 🌸

@splinetool.bsky.social

#3D #interactive #web

Glad you enjoyed it 🙂✌️

YouTube video by Pixel Pioneers 2D and 3D Animation using JavaScript Greensock & Spline - Chris Gannon - Pixel Pioneers 2025

If you’re interested, my talk at @pixelpioneers.co in Bristol in June on 2D and 3D #animation is available to watch here 🙂
youtu.be/2xLKrHZ44qk?...

Glass Balloon Slider

#ux #ui #3D #glass

Globules loader

#motiondesign #3d #web
@splinetool.bsky.social

Playing with Layer blur and buttons in Hana

#ui #ux #interactive #motiondesign

@splinetool.bsky.social

Glass Lights

Glass Blur Toggle
#ui #ux #glass #component
@splinetool.bsky.social

Playing around in Hana from @splinetool.bsky.social
#interactive #motiondesign

It's super hot today so don't forget to drink water!
#ux #ui #javascript #svg #water #weather

Fun #UI toggle for #Wimbledon fans!

Ok I fixed it. The dotted path I was using was in the <DEFS> tag and was being displayed in the SVG via a <USE> tag which iOS didn't like. When I use the original path it works.

I need help!
Just delivered a project to a client that uses dashed lines in SVG whose attribute strokeDashoffset is animating giving the 'marching ants' vibe. Due to an iOS bug, this doesn't work on iOS. Anyone know a work-around? #javascript #ios #svg

The words 'Pixel Pioneers' animated to give the impression they're made out of liquid, or under water, with some colour circles around it.

For his @pixelpioneers.co Bristol talk on animating in 2D and 3D, @chrisgannon.bsky.social created this beautiful animation. Thanks for doing this, Chris! 😍

It was a pleasure and thanks for inviting me 😀

Another client interactive measurement tool that asks ‘How freely can you express yourself?’
I made this before the stepped slider and coding the dynamic bounce height was tricky!
#ux #ui #measure #performance #animation

Good idea!

Updated version looks much better

WIP of a client’s #ux measurement tool asking ‘How are you coping out?’
#design #ui #animation

Sneak peek at a WIP client project. This interactive component asks ‘How burnt out are you?’

#ui #interactive #motiondesign

Slide showing a fried egg in a pan that acts as on / off toggle

Loving @chrisgannon.bsky.social’s talk

We need more conference talks that explore whimsical stuff like animation on the web and show us the art of what’s possible

#PixelPioneers

Thanks Andy!

If you want to code along with me at 2:30 @pixelpioneers.co you can grab the Balloon Slider pen and fork it at codepen.io/chrisgannon 🫡

I’ll be doing doing a live code demo in @codepen.io and @splinetool.bsky.social at @pixelpioneers.co in Bristol tomorrow. Make sure you have an account if you want to follow along 🤓🙂

Everyone's going glass crazy so here's a glassy loader created using @splinetool.bsky.social
#design #ui #animation #loader #apple

Here's my quick attempt at the Apple glass slider in
@splinetool.bsky.social

Happy to share this scene if there's enough interest!
#ui #ux #apple #glass

Preparing talk ■■■■■■■■■□ 99%

pixelpioneers.co/events/brist...
@oliverlindberg.com

This could be built easily using SVG and animated using GSAP.

A royal fuck is choice if you’re feeling peppy.