Animation and Interaction

One of the great things about digital formats is that you have the ability to add animations that can't be captured in print. When used correctly, movement and interaction can create a much more engaging experience for a user. Below I have included examples of animations I have created that are meant to enhance a larger story.

Story Openings — Holiday Card — Digital Art Slideshow — Letter Animation

Story Openings

This is a series of animated GIFs I created using a combination of Adobe Photoshop and Adobe After Effects. This process included creating the background images themselves and then modifying them to create different frames of the animation. Each GIF is meant to serve as a title card/opener for a children’s story I wrote. I created several different designs for the same title before choosing one to move forward with. They all have the same general theme of incorporating stars and space into the design, because the characters in the story are all shaped like stars.

Roll over each image to see the animations.

Holiday Card

This is an animation I created to use as a digital holiday greeting card. I used different sets of brushes in Adobe Photoshop to digitally paint the winter scene used as the background image. Then I coded the entire animation with HTML and CSS, using @keyframes rules to define the animations.

Digital Art Slideshow

As part of a personal project, I digitally painted a series of abstract background images in Adobe Photoshop. Each image was created using different special effect brushes and enhanced with filters and layer styles. I coded this digital slideshow in JavaScript using jQuery effects to display the full set of images together.

Click each circle or the arrows to navigate through the slideshow.

Letter Animation

This is a sample interactive feature I coded with HTML and CSS while teaching myself coding. It uses hover effects and CSS transitions to change the visual style of each letter in a word or string of text.

Roll over or click each letter to see the text animate.