Over the last few days, I’ve been playing around animating some of the lovely Swissted gig posters by @MikeJoyceNYC on @codepen. This 1st one for The Police uses @greensock’s GSAP 3, and #PixiJS to handle the blends’ performance.
codepen.io/petebarr/pen/Z…
codepen.io/petebarr/pen/Z…
In case you’ve not come across Swissted before, it’s a lovely project by Mike Joyce where he’s redesigned old punk, hardcore, and indie rock show flyers into International Typographic Style Swiss modern posters. swissted.com
I first attempted to try this out just using #svg for the circles' animation suspecting that mix-blend-mode may cause an issue with performance, and this clearly was the case. This was my first test case to see the effect it had. Really not good 😞
codepen.io/petebarr/pen/c…
codepen.io/petebarr/pen/c…
So canvas it was I guess. I’ve wanted to play with #PixiJS by @goodboydigital for quite a while and this was a good excuse to try it out for the first time to get some silky smooth WebGL performance without deep-diving into the WebGL API world.
pixijs.com
pixijs.com
Coming from a Flash background jumping into #PixiJS didn’t feel too much of a stretch. I had a couple of bumps to contend with and thanks to @ZachSaucier for the couple of tips. A workaround for lack of being able to control the circle scale ‘transform-origin’ was my main issue.
For the staggered animation I used an advanced stagger only as a controller for the animation, and the onStart callback was the trigger to start the animation of the child circle container objects.
Anyway I hope you like, and I’m sure my first stab at the code maybe isn’t perfect but it works nicely 😉 I’ve got a few more pens to share, and hope to do a number more very soon as they’re quite addictive to play with. Cheers! 🍻
Original design on Swissted: swissted.com/products/the-p…
