LearnAnything

About DIY

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.

Kid Passions

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.

Credits: Design & Illustration by Tyler Thompson

Challenges

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.

The entire motion sequence required some considerable critical thinking in order to stage it perfectly. Timing was achieved using a series of calculated and placed callback methods in JavaScript that would determine and report when each orb was to emit a wave to the child's brain. Proper naming conventions and organization of layers in Illustrator helped to facilitate this process making the animation work effecient in regards to coding purposes.

Final Product

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.

See the Pen Kid Passions by GRAY GHOST (@grayghostvisuals) on CodePen.

Final Animation Sequence. View the live demo on CodePen

Underneath

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.

Credits: Illustration by Isaiah Saxon

Challenges

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.

Final Product

After hours of tedious and labor intensive work the result is fantastic. Pay close attention to the life beneath the rock.

See the Pen Underneath by GRAY GHOST (@grayghostvisuals) on CodePen.

View the live demo of Underneath on CodePen