How I Did: Fat Bear Transition

The Idea

My coworker likes bears and introduced me to Fat Bear Week. It's a competition in Brooks River in Katmai National Park in Alaska where people vote on the fattest bear. I stumbled upon a news article that had the animation up above, and I wanted to recreate it.

I thought it would be cool to have the same transition between my drawings and pictures, so I started to create my own personal website for the first time just so I could learn how to code the transition.

How I did it

My research led me into CSS animations which I've never used before.

• ~ Coin flip with CSS, HTML, and JS
• ~ How I Created a Simple 3D Coin Flip Animation Using CSS
• ~ How to animate width and height 100% using css3 animations?
• ~ Animate an element's width from 0 to 100%

I recreated one of the coin flips with my images and looked into a lot of different answers on StackOverFlow, but they felt too complicated for what I wanted. Even if I take some of the code from someone else, I would need to understand it enough to alter it for my use case.

I finally stumbled upon this article where I learned about clip. Clip is a deprecated CSS property and clip-path is the current one that allows someone to crop an image based on a shape or path.

The idea was to have one image gradually appear while the other one disappeared like a split reveal, and with split-path and an element input of type range I could do this.

The inset function takes four values: top, right, bottom, and left.

For the top code, as the slider moves from 0 to 100, the right side gets less and less cropped which reveals more of the picture. In the bottom code, this one hides more from the left as the slider increases, doing the opposite of the first image. So one image is revealed from left to right, and the other from right to left. When they’re stacked perfectly on top of each other, the visible areas are like opposites and one fades in as the other fades out.

This is the first time I've finished a personal project/task. My website is far from finished and there's tons of areas I can improve on. I thought it was fun how the way I code now mirrors how I draw. For both, I tried following very long tutorials, but in the end I learn best by recreating what I see. I'm learning perspective by drawing my favorite buildings and web development through silly projects. It's nice to enjoy learning again.

While I worked on this project, I thought of several new project ideas or things to learn.

• ~ learn CSS by recreating quilt patterns
• ~ learn to write blog posts using mdx
• ~ create my own slider and animations
• ~ learn about svg