- Project: SVG Animation
- Website: http://diy.org
- Tooling: Adobe Photoshop, Adobe Illustrator, SVGO GUI
- Libraries: TweenMax, DrawSVG and MorphSVG by GreenSock
The best person to show them how is another kid. DIY is a safe online community for kids to discover new skills, meet friends who are geeks just like them, and be awesome.
This SVG animation project titled "Kid Passions" had one goal in mind; subtle and simplistic. It was essential that each orb circling the child float delicately while randomly emitting waves to the brain thereby resulting in a separate signal transmitted through the child's body. The final touches would be a pulsating orb behind the child, eye blinking and breathing to further portray a sense of realism.
To begin our animation process, the provided artwork required further manipulation in Illustrator. Each orb signal was recreated as a path in order to function correctly with DrawSVG. The other challenging aspects were to create the instances of frames for breathing. To construct this morphing effect two states had to be created; one for the mouth and one for chest. Each of these states were hand manipulated in Illustrator using the bézier anchor tool to pull the shapes anchor points into position. The pulsating orb behind the child was also recreated from scratch and sized appropriately.
As you'll see below the animation sequence requirements were achieved with flying colors. Pay close attention and watch for the subtleties that take place.
Using the following illustration titled "Underneath" by Isaiah Saxon, it was requested to create an animation sequence that was subtle and sparked curiousity. What makes this animation entertaining are the tiny and intricate pieces to discover; the arm bend, worm crawl, bug movements, rock lift, foot wiggle and even the fireflies within the jar.
Since the graphic was originally created in Photoshop it meant the artwork had to be converted into vector to animate as an SVG. It was decided the most efficient method that would also result in the most likeness to the original was to use the tracing option in Illustrator. Once the tracing was completed additonal tweaks were performed using the original Photoshop image as a template layer to match the patchwork against.
The majority of items within the artwork had to be isolated by hand to achieve separate and individually unique animations such as the foot wiggle, arm bend, crawling worm, moving shadows, the rock lift along with the grass and lilly pads just to name a few.
The most challenging aspect regarding this sequence was the arm bend. Since the unbent state of the arm did not exhist it had to be created from scratch requiring hours of manipultion of the anchor points that constructed the vector outline. Also the portion of the hand resting on the rock had to be touched up as the tracing option left a large hole where the hand rested.
After hours of tedious and labor intensive work the result is fantastic. Pay close attention to the life beneath the rock.