adobe capture | animate.css

video files part one | part two | bike rotating wheel

Brighter Future, part 1 from Lara A Henderson on Vimeo.

Brighter Future, part two from Lara A Henderson on Vimeo.

student examples Everett Klein | accepted students day

Develop two color motion graphic that contributes positively to society. Think of the audience you are designing for. Who is this design for? How will they benefit from your message?

The design will be graphic and will utilize two transparent colors and the third color they make when they overlap. Use marker, paper and pen/pencils to prototype.

Learning objectives:

  • practice with web development, SVG animations, RGBA format & use of javascript libraries
  • color theory
  • motion design
  • design for social justice

Possible direction for messages:

  • COVID-19 response
  • inequality
  • reading & writing skills
  • land & property acquisition
  • disaster preparation
  • historical education
  • first aid & CPR
  • childcare & parenting tips
  • animal care
  • business development
  • financial literacy
  • fundraising techniques
  • foreign language education
  • access to therapy, counseling & coaching
  • geopolitical & political education
  • dietary & culinary education
  • agricultural & botanical education

Brainstorm concepts

  • Pick an topic of interest
  • Develop a concept for your design, create thumbnails
  • Determine how you will you use motion and color to further support the message of your graphic
  • Use the svg file format to create the image, 600 x 600 px
  • Bring your svg file into vscode
  • Use the animate.css library for motion design
  • place code to access library in header
  • attach a class to the element you are animating

Leave a Reply

Your email address will not be published. Required fields are marked *