Assignment #1
This assignment involved using the online website builder Webflow to tell a story that is controlled using one dimensional interaction (scrolling). For this project, to encourage adopting dogs from shelters instead of buying them from stores or breeders, I chose to tell (and put my own spin to) the true story of Chad the shelter dog.
Scrollytelling: A Second Life
As my target group is mostly children who ask their parents for puppies for their birthdays, I chose a comic book style to appeal to this age group. I also decided to use a soft, watercolour, and cute drawing style (juxtaposed with the darker elements within the story) to convey the notion that although dogs can be cute, there can also be a hidden dark story behind them, such as the one shown in my project. Initially I wanted to do a vector style, but in the end I decided to change my style to a more hand drawn one, so that it feels more organic, natural, and alive – just like dogs.
Phase I: Sketches and Sketch Revisions
I started by summarizing Chad’s story into little nuggets that I want to animate. I wanted to keep the essence of the story but also tell the story from Chad’s perspective. To accomplish this, I decided to tell the story by combining illustrations and short narrative texts “made by” Chad. As seen below, the sketches are very rough. The reason behind this is because for something like a scrollytelling comic, it was difficult for me to commit to a few ideas per comic strip. I found myself constantly writing in alternative ideas beside my main ideas. So, this time, I chose to go for a quantity of ideas over quality, in hopes of getting a few great ideas from them. After presenting the sketches to class, I generated ten revised sketches on top of my original sketches.
Phase II: Webflow
Webflow proved to be a challenge for me despite its seemingly easy-to-use interface. For example, I wanted a scene where the two dogs chase Chad and his friend. However, it was difficult for me to position separate images on Webflow and have them move the way I want when I scroll down. Layering was also a problem for me, because sometimes I want objects to go behind and/or forward another object.
So, to combat this problem, I decided to combine Webflow, the Adobe Suite, and Clip Studio Paint. After drawing the objects on either Clip Studio Paint or Adobe Photoshop, I refined them on Adobe Illustrator and imported them on to Adobe After Effects. I animated my scenes on After Effects and rendered them as JPEG Sequences. Afterwards, I closed the project, imported the JPEG images back to After Effects, and set them as sequence layers to create a frame-by-frame animation. Using the After Effects extension Bodymovin, I made a JSON file out of the animation, which I was then able to import to Webflow, to which I gave the scrolling element triggers so that they would animate (frame-by-frame) as I scroll.
Initially, my art style was all over the place. I could not really decide whether to use my own art or royalty-free art from the Internet, so I ended up using both.
Phase III: Revised Webflow
My professor also noticed my project’s inconsistent art style and suggested that I stick to one style/ I decided to scrap everything and use another art style: a more organic, hand drawn one to better represent the more holistic qualities of dogs.
Phase IV: Reflection
This project really encouraged me to think outside the box by using tools I am unfamiliar with, such as Webflow and Bodymovin. In the future, I want to fix the opacity issue that occurs as the two protagonist dogs get chased. When I get the chance, I also want to align the adoption heart to the dog in the panel above it. Because I initially intended for the two panels to be separate, I did not think of aligning them. However, as I was working with Webflow, I discovered that it was possible to perfectly align one image to another by playing with the margins.
To access this Webflow project, please click here. You may have to click the eye icon (“Toggle Preview”) three times (see preview, go back to the project, then see preview again) for all the images to load properly.