Weeknotes 24:04

January 29, 2024

Week of January 21–27


We learned things best when we build something and get to play around. It is why Chris Coyier used to say all the time on Shop Talk Show, “just build websites.” I have a subscription to the Creative Coding Club. Carl has encouraged us to build things and not just watch the videos. What we do is a craft and a craft is learned best by practicing it.

I decided to take that advice and build out some different animation components that I have been inspired by. One of those components is a horizontal scrolling element that scrolls horizontally as you are scrolling down the page. I have seen it used on several of the sites I have been inspired by recently.

Carl had a lesson on Creative Coding Club so I watched his lesson and then tried it for myself. It is a very basic “model” and I hope to play around with some more variations of it in the future.

See the Pen Horizontal Scroll Prototype by Jeff Bridgforth (@webcraftsman) on CodePen.

The second component I built was inspired by the Runway Financial site. I liked how elements scaled in and out as they entered or left the viewport. This one took me a bit longer to perfect. One thing I learned is that I needed the transform-origin to be at ‘top center’ to work correctly. I tried having it transform from the center of the box and it would not work properly scrolling down the page because the box would not transform until after it was in the viewport. My colleagues gave me some suggestions on how to clean it up.

See the Pen Scaling animations by Jeff Bridgforth (@webcraftsman) on CodePen.


I did not do a lot of work on the Toyota Policy Drivers Game Hub this week. But the time I did spend I used to polish the interface. My teammate had changed one interaction and it made me realize that I needed some transitions on other elements to make it look just right. I got in there late on Friday and fixed it so that it made me happy.

It took all of fifteen minutes to do but it made such a big difference. I love being able to address small details like that. The client and most people would not even know what I did. But it makes it the premium product we strive to deliver at LGND.

I plan to make a video and explain some of the last bits of polish I added to the site once it launches in a couple of weeks.


I took time on Tuesday to peruse sites from Codrops’ Inspirational Websites Roundup for December. Here are some of my favorites.


This site had both of the animation components that I built on Codepen, the horizontal scroll and the scaling of elements as they enter and leave the viewport.

The Little Grey Film

I loved the typography. I like the lines that are animated across the screen for each section as you scroll down the page. And I like the shapes. The site gave me delight when I was on it.

Studio D

I particularly like the section of the site with full-width images with smaller fixed images that would change when a new section came into view.

ART + TECH Report

I liked the subtle animations in the report section. I also like the text that was blurred when it first entered the viewport that “unblurs” as the whole paragraph is in the viewport.

Site updates

I added a little bit more to the design of the site last week. I added a repeating background image that gives some texture to the design. It was part of my original idea but I decided to hold off implementing that piece until after I launched the site. It did not take me as long to address as I thought. I think it adds a little bit more elegance to the site. I played around with another pattern but it was too busy.

The background image I am using came from Hero Patterns. The pattern I am using is called “Interlocking Circles.”

The individual blog page with the “textured” background.

What I wrote

Articles I read

Books I am reading

What I watched

When the director happens to be an expert in colour theory (YouTube) – A video describing the use of color theory in La La Land that helped to tell the story.

1 Comment

  1. Weekly Links 01.29–02.04 – ntdln

    February 12th, 2024

    […] Weeknotes 24:04 (Jeff Bridgforth) […]

Comment on this post