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.