- jQuery / jQuery UI
- Scalable Vector Graphics (SVG)
- Conditional Logic
- UI Design
I wanted to make the animation more original for my portfolio, so I set about re-imagining the character. I decided to lose the potato and go with a robot theme, and instead of a static potato I would have a series of different robot heads that could be swapped. I dropped the hat function and instead wrote a function that would match the color of the facial features to the head they were placed on.
First, I declared an array for each set of facial features and the head. Next, I wrote functions that would loop through & animate the different components with GSAP methods. I wrote a function that would first check if a head graphic was visible, and if so, animate it off the screen and then animate in the next head in the array. If no head was visible, the first head in the array would be loaded. A nested 'if' statement was used to check if the visible head was the last in the array, and if so, would animate it out and leave the screen blank.
Similar functions were tailored for the mouth and nose, and eyes. I did not want the user to be able to see facial features if no head was visible, so I wrote additional logic to show a yellow 'X' if any facial feature functions were called without a head visible.
Now I could scroll through heads and mix & match facial features. To address the mismatched features, I first declared an array of 8 colors - a background and highlight color for each character. I added statements to the 'head' function that would take a pair of colors from the array assign each to a class of SVG elements for each changing color in the features. Now, the facial features would always match the color of the head they were seen against.
Finally, I needed UI elements to call the various functions. Using Adobe Illustrator's 3D features, I designed retro-futuristic buttons to call each of my 4 main functions, plus a 'reset' button that would call a function to reload the page. Each button has a 'pressed' and 'unpressed' state. I used the :active selector in css to animate the button states, and set event listeners in my script to call each function on click.