I’ve been doing some more simple experiments with SVG animation using GSAP, and amended my chicken-in-a-fokker scene on Codepen that I wrote about in the last article. Continue reading Added interactivity to my SVG animation
Tag: SVG
Optimising my clouds CSS animation
I recently created an animation of a plane dropping bombs and clouds whizzing past which you can see on Codepen here, and see my article about it here.
I used a mixture of animation types, including GSAP and CSS animation. I was doing some investigation into how much memory is required to run these animations (because it made my laptop’s fan come on all the time!) and found that the way I was animating the clouds in the background really wasn’t efficient. Continue reading Optimising my clouds CSS animation
Creating animation with SVGs, CSS animations, spritesheets & GSAP
I’ve created an animation using a few different methods that runs in a browser and is responsive (works on both mobiles, tablets and desktop). Continue reading Creating animation with SVGs, CSS animations, spritesheets & GSAP
The difference between expoting SVG from Adobe animate and Illustrator
I normally create my vector graphics in Adobe Animate, just because since University (back when it was called Flash) it’s what I’ve used the most, even though I know Illustrator is the more popular tool for vector graphics. Continue reading The difference between expoting SVG from Adobe animate and Illustrator
Transitioning the colour of an SVG image
So when trying to make the BTB website load as quickly as possible (which requires an unhealthy obsession with tweaking small things to get a better score on Google page speed insights) I removed Fontawesome, which was previously baked into our CSS file. I like Fontawesome, it makes adding icons easy, but has problems, and in this case the problem was unnecessary addition of loads of styles we didn’t need, and valuable kilobytes of data I wanted to shave off. Continue reading Transitioning the colour of an SVG image