Lessons from the Web Animation Workshop at Form Function & Class 8
by Ben Viernes
“Giving the illusion of life to inanimate objects” is how Gab Madrid, one of our speakers, defined what animation is. The speakers, Gab and Lindsey Grande Madrid, are a husband and wife team who co-founded their design studio, Color Cure. Their workshop on Web Animation at this year’s Form Function & Class conference focused on the animation process and maximizing the use of CSS to fully animate a website.
At the beginning of the workshop, we were shown a sample website which the speakers had created. The website was about their parody of the video game “ARMS” that they aptly named “KAMAO”. The speaker breezed through the webpage, showing the different sections of the site: the character portraits, the description of the different game modes, and even a very believable order link.
The animation process
However, before they began to actually talk about animating the website, they first talked about the animation process. The first step in the animation process is to create a plan. “What to animate?”, “How to animate it?” and “How should it look like?” are some questions that you should ask yourself in order to plan out what to do for your animation.
Storyboarding
After creating your plan, what you do next is to create your storyboard. Storyboarding is important because it helps you visualize your animation; it allows you to draft what you want your animation to look like before actually doing it.
Storyboarding is also a good way to further improve on your plan by finding weak points or points of improvement before doing the animating.
Storyboarding and planning doesn’t necessarily have to be done digitally, as the speakers explained; you should use the medium you’re comfortable with, be it on paper or on your computer.
Animate!
After planning and storyboarding, you’re ready to animate. In the case of the workshop, what we were trying to animate was the KAMAO website that was shown at the beginning of the workshop. The speakers demonstrated how different keyframes and transitions in CSS worked to animate the assets and images used in the website.
After showing how these keyframes and transitions worked, the speakers allowed the attendees to play around with them and animate the website as they wanted.
Next, they talked about other tools and software, such as Animatable and Sketch, that are useful for both illustrators and animators. They also shared one of their inspirations for the sample website, which was the website of Nintendo’s Splatoon 2.
Gab also walked around the room and checked on how the audience were doing; audience members were encouraged to ask for help if they needed it.
Workshop Presentations
Near the end of the session, attendees were invited to present their work in front and show how they made use of CSS to animate.
The workshop ended with the speakers giving further tips on how to animate which included subtlety and clarity in design; they also encouraged the audience members to be confident in their works and to always let their creativity flow.
<form> function() & .class is a not-for-profit, grassroots conference for designers & developers brought to you by the volunteers of the Philippine Web Designers Organization. FFC8 was held on September 16, 2017 at The Globe Tower in Taguig, Philippines.
Words by Benedict Viernes. Photos by Arcel Vocales. Edited by Sophia Lucero.
