Featured Video Play Icon

14 Jumping Jack CSS Sprite Animation with symbols

In this tutorial, I will show you how to create CSS sprites for a web animation in Affinity Designer 1.5.5 with a template.
The sprite is drawn using symbols in Affinity Designer.
The animation with HTML and CSS is shown in the tutorial and explained (26:40).
The project files can be downloaded here:

Hampelmann – Jumping Jack

The tutorial was created with Affinity Designer 1.5.5 and recorded and edited with Camtasia: mac 2.10.8.

As an editor for the source code I used Espresso 2.2.3.

For sound recording, I use a ZOOM H1 recorder with a SONY ECM-CS3 microphone and Audacity for editing.

Posted in Affinity Designer and tagged , , , , , .

Since July 2015 I work with Serif programs Affinity Designer and Affinity Photo. In June 2016, I started to publish tutorials on my YouTube channel, Mensch Mesch on a regular basis.
Before I worked for many years with the programs AI, PS, ID and AE of Adobe.