Front End Web Developer, UI/UX Developer, Interactive Designer

Interactive Animation

See the Pen Overly Complicated Light Switch Final by Matt Harrell (@mharrell8) on CodePen.

Skills

  • HTML
  • CSS
  • Javascript
  • JQuery
  • GreenSock

Description

This is an interactive animation I created that uses counters and conditional statements to create an animation that only occur if certain interactions are completed.

Process

Counter

I created a simple counter that would trigger the red light to change to yellow then if the counter went up again it would make the light turn green. A user could add to the counter by pulling the brown crank.

code of switch counter function

Switch

This is the function I wrote for the switch. After the counter hit 2, the switch would become interactive and could turn on/off the light.

code of the switch function

Electricity and Light

This is the function I wrote after all the conditions are met and switch is in the on position would trigger a Motion Path and the light would turn on.

code for electricity and light