Why overflow is perhaps the most important property for CSS animation (part 1)?

I got into programming because when I was in college I was a part of a multi-group Capstone competition for an end of senior term management policy class. The project was a 5 round running of a mock company where each group had to project sales of products in 4 different sectors based upon certain pillar criteria. Departments such as sales, finance, procurement, distribution and personnel were correlated to form an integrated business policy and we were ultimately evaluated on the formulation and implementation of our corporate strategy.

To better predict sales and other department related variables, such as department overhead cost, or R&D automation benefits, I started to rely more heavily on excel with its conditional statements. By the end, my group’s weekly meetings consisted of me going over my’ excel predictions and implementing those predictions before round deployment. My team and I won the competition with the best overall strategy and highest net profit.

It wasn’t until a few years later when I was asked by a friend of a member of that group to help his team with their Capstone that I started to really think that building these kinds of predictive tools and resources for people could be a satisfying career path. So the next step for me was to figure out what sort of other resources allow for the implementation of conditional statements, and the obvious answer was programming languages.

Soon after, I started building python applications through online course sites, and began to self study the basics of development, such as HTML, CSS, and Javascript. I joined a bootcamp and learned full stack development utilizing the Pern stack which is PostgreSQL, Express, React and Node. There I developed a few web applications including an e-commerce web app and a choropleth mapping app to showcase in my portfolio.

After finishing the bootcamp, getting a dev role became difficult. I think a lot of it came down to how I showcase my abilities through my portfolio. Since, most of my abilities lay in the aggregate design, functionality and state management of web apps, and less on what looked good. So, I decided to learn as much as I could about animation and designing a portfolio that would blow my potential clients away. While I was learning about animation and how better to be a front-end developer, I got a call to intern for a respectable firm as a quality assurance automation engineer and decided to put my learning on hold for a bit and focus on my internship.

Four months go by and I absolutely kill it in my internship role, learning much about debugging and refactoring Selenium code to Protractor. However, when the internship came to an end, I was back to the drawing board to landing a developer role.

Throughout my learning experience, as it relates to animation, I have learned that perhaps the most important property in front end is overflow and although this is an article on overflow, I think it’s important for me to express how something so simple can perhaps decide one’s fate in landing a role as a developer.

To get started, I will highlight three to four examples on how overflow is that backbone property in CSS that can truly make your portfolio stand out.

Building an Interactive Resume

I scoured the internet looking for amazing portfolios that I could take a lesson from and came across many that had interactive games with segways to projects and accolades. One in particular was made by a fellow by the name of Robby Leonardi, you can view his premiere website at http://www.rleonardi.com . Although, he isn’t actually doing anything more than using scroll through animation, it got my wheels turning on actually creating something similar but much more interactive. This is when I came across Drew Conley and his RPG 2D Javascript game called the Drew Crew, and it was just what I was looking for (check him out on youtube at https://www.youtube.com/channel/UCvQwAK9oAYXM0RMucLy2-BA ). In his videos, he talks about using sprite sheet animation, which is an image that consists of smaller images stylized in a way that come together to create an animation. Here is an example:

cropping a starter image by nesting a container div around that image and applying overflow: hidden like so:

With the above code, we are able to essentially highlight one frame and conceal the rest, this is how it will appear

Finally, we add framework animation to our actual image like such:

Here we are declaring our animation property with an identifier name, cycle time, amount of steps( in our example it should be 6), and finally an infinite amount of cycles to create that animation running effect.

Our keyframes finally will transform the sprint image using a vector starting at its relative position then moving horizontally along the x axis leftward and back to its starting position, producing the running effect. Here is how it will look in the end, and without overflow this wouldn’t be possible.

Building a submit button with a stylized border moving in a clockwise fashion

I came across a code pen not too long ago, and searched everywhere on the database to find it again, but to no avail. Hopefully, I can give a replication of the code from memory. It too utilized overflow: hidden to create a remarkable animation. This is what it looks like:

And this is what it looks like without overflow:hidden :

As you can see, there are four moving parts situated within a container and moving along a linear path from -100% starting point left, right, bottom or top to 100% ending point left, right, bottom, or top respectively, around text. Below is the code:

We start with an a tag container, and a relative position in order to provide our span tags the position absolute, we add a display of inline-block so elements are able stack next to each other this will come in handy later when we are positioning the span tags around the a tag container.

I added a glowing effect on hover for the a tag, this is why there is a transition, and since in-line block takes into account margin values unlike its block counterpart, I added a margin to elongate the container for better aesthetics. Here is the code for the hover:

Here, I add four box-shadows increasing the blur radius each time to give it a light bulb look.

But I digress, I follow it up with setting my span tags position to absolute and then positioning each span labeling them 1–4 left, right, bottom, or top, as well as adjusting their width and height to mimic rays of light. You can check out my codepen for a more in depth look here https://codepen.io/devcarlo/pen/mdWYMyV .

Stay tuned for part 2.