CloneComp is a Webflow development competition sponsored by the team at F'inSweet. Here's how it went down:
My daily submissions can be seen in the links above. Each day was a unique challenge.
The first day I set out to create a truly beautiful experience using only web elements (no images) to help others who would clone my project understand the power of CSS Grid. On my first ever attempt at a livestream, I created the base grid for the ship. I knew I wanted to do pixel art for this, as it's a unique, simple style that would be easily translatable to other story elements. Plus, my experience with this sort of thing in the past (my snowperson builder) allowed me to work quickly, something that was quintessential considering there was only 24 hours to get the thing done.
The second day, the clone day, turned me on my head and forced me to learn someone else's processes, naming conventions and page structure. Once I got past that hurdle, I was able to add my own visual flair to to project while expanding on it's narrative. I loved exploring different gif stickers on Giphy, to help enhance the concept of a wormhole, adding lightning and electricity effects to make the thing extra sci-fi 👾👾
The final day was the ultimate challenge. How do I create something that expands the narrative and visual flair from the second round while speaking to the spirit of the cloneable nature of the competition?
For this day, I cloned every project with a spaceship in it, grabbed those spaceship elements, and set to work combining them in a layout for a climactic battle a la Avengers Endgame. The trickiest part here was getting all the ships to scale and conform to a certain size; some were Lottie files, some PNGs, and others were made in HTML.
From there; I crafted a big bad for them to go up against; Cloneicus, a circular space demon made of GIFs. Making this guy actually crashed my browser a few times because of how many GIFs there were. Some smaller ones you might not be able to see include Scott Pilgrim headbanging, Jabba the Hutt, and a Charizard. From there all I had to do was set up all 10 loading loop animations, connect the dialogue boxes to the 5 custom interactions I made for each, and conclude the space battle with one giant interaction bringing in all the ships, shooting friggin lightning lasers, and destroying Cloneicus... for now.
This has been one of the most rewarding experiences of my career. When I started designing in Webflow 3ish years ago, I barely knew what a div was, much less how to make complex interactions. It speaks to the power of Webflow and the No-Code movement, and affirms the potential this technology has to literally change the world.
I can't wait for CloneComp 2021 🚀
.jpg)
