Jump to Navigation Menu

Weeknotes 23:16

June 11, 2023

Week of May 21–27, May 28–June 3, June 4–10

Life has been incredibly full over the past three weeks and I was not able to make time to write weeknotes so this one will cover the past three weeks. Life has been full of good things, challenging things, and things in between.

  • My wife and I celebrated our 30th anniversary. It is a pretty big milestone that we quietly celebrated over dinner at a restaurant that was new to us.
  • My son started a summer internship at Flywheel as a motion designer. They were really impressed by the video he made last year documenting his creative process for the HSP production of The Grand Duke. He will spend the summer creating several promotional videos for the company. It is a really sweet opportunity with mentorship and a lot of creative freedom.
  • My mother-in-law came home from a rehab hospital after being away for a month. Her recovery has required more hands-on care which has been a challenge. But we were very encouraged by some progress this week that restored much of her independence.
  • We have spent a lot of time consulting, praying, and just listening to our daughter as she has been heavily engaged in a job search for the next school year. She showed a lot of courage in turning down one offer that was just not right for her. We believe she is close to receiving an offer from another school that she is very excited about and is only 7 minutes away from her apartment in Nashville.
  • My youngest started her first job at a local coffee shop (and frozen custard), Sourdough Cup of Joe. It is only 5 minutes from our house. She has enjoyed the experience overall and likes her co-workers. I went and visited her one night this past week and enjoyed a Slip and Slide (banana split with caramel and chocolate sauce). I anticipate more visits for ice cream throughout the summer.
  • Workwise, the past three weeks have been much busier as I was asked to jump in to help out the new LGND site, which I will expand upon more below. So besides life being full, work has also been full which did not leave much time for me to keep up with weeknote posts.
  • LGND is undergoing some structural and organizational changes to better leverage the breadth of talent of our team. As part of those changes, I have been asked to take on a leadership role. More specifics about this new role will be communicated during my upcoming six-month review.
  • In preparation for that review, I took some time a week ago to review the past six months of work to look for accomplishments and areas of growth. Here is a resource I have found helpful in remembering the work that I need to be recognized for during a review period.

Jumping in to help with the new LGND site

For the past three weeks, I have been helping out with the new LGND site. We recently updated our branding and needed a new site to reflect those changes. Ross, who is new to the team, was tasked with building out the project starting at the end of last year.

One of the challenges of an internal project is making time for it in the midst of the work that brings in the revenue. So the process of this project was much slower than other projects and there were several starts and stops. Over the past few months, there has been a more intentional effort to get the project over the finish line. It helped to attach a deadline and projected launch date to help focus the efforts.

I was asked to help out while Ross was out on vacation. I spent the first week addressing QA issues and looking for ways to improve the site. One of the improvements I made was to give more horizontal padding to smaller screen layouts.

I was a bit nervous and intimidated by jumping into the project at first because Ross has a very different approach to building WordPress sites than I do. It is a more component-based approach with stylesheets and markup broken into components and blocks. Part of the challenge was just figuring out where the code was that I needed to update in order to fix issues and improve upon what he had already built.

I was also a bit intimidated because I knew he was building Gutenberg blocks with React rather than with Advanced Custom Fields, which is the method I prefer since I am not familiar with React. But most of what I had to do involved CSS and PHP files so I quickly felt more at ease and felt confident in the work I needed to do.

Taking the site to the next level with animations

At the end of that first week, I met with Mike Aleo, founder and managing partner of LGND. Mike has designed much of the site we were building. He felt like the site needed some work to bring it up to the premium level of work that showcases the talent of our team.

Much like other LGND projects, there was not a lot of prescriptive guidance on animation and interactions that add that level of quality that Mike was hoping for.

Many times in the past, Mike has just given us marching orders to improve a site experience and expected us to run with it. He did equip me with a few ideas of what he would like to see but there was a lot of freedom and trust that I could take it and run with it.

The first thing that I asked for was to extend the launch date from June 1 to June 14. I wanted to have plenty of time and space to add those touches that would bring it up to the level that Mike was expecting.

Animation is more art than science so I wanted the time to experiment, try things, fail, and come up with new solutions. I knew that I could not meet that level of quality in less than a week. I was granted the extension.

I decided to start with the case studies, which are the majority of the content of the site. I started thinking through how to animate different sections and then started trying some different things.

A lot of the animations are simple reveals, content fading in and up, that are triggered as the user scrolls down the page. A lot of my experimentation was in the position of the triggers, transition timing, and how to make different elements animate in relationship to other neighboring elements.

In one of the sections, I used position: sticky to attach that section to the top of the viewport and have the next section scroll over it. I also used some background color change fades as the user scrolls further down the page.

The image of screenshots becomes sticky when it hits the top of the viewport and the next section of the case study scrolls over it.

I used some clip-path animations to reveal images or videos to add some more visual interest to the experience.

Parallax

After finishing the animations for the case study pages, I worked on making a collage in the hero of the team page into a parallax animation, where different images in the collage move at different speeds to create the illusion of depth. I found an article in the GreenSock forum that linked me to this demo on Codepen which I used as the basis of my script.

I created an SVG with path elements and some image elements for the different layers. I prototyped the solution in Codepen. My teammate suggested masking an image of the space shuttle launching so that we could “launch” the shuttle in our animation.

See the Pen Triangle Parallax by Jeff Bridgforth (@webcraftsman) on CodePen.

He took the time to separate the image into two images and applied masking which one of our designers polished later in the week. After making some adjustments to improve the animation, I moved the solution into the WordPress build.

I reused the parallax script in another place where we had several triangle elements in the background so that they would animate on scrolling.

I also created a moving carousel of logos to showcase the different companies and organizations that we work with. I was able to reuse a solution from the recent Principal Media project to make that happen.

Custom Cursor

One of the other things that Mike asked for was a custom cursor. I have seen this employed on several “showcase” sites lately. Mike also sent me several examples of sites that he had seen it used on. I worked with one of our designers, Karissa, and she designed several different states of the cursor.

  • Default cursor
  • Cursor when hovering over links or buttons
  • Slide cursor to use on a horizontal scroll
  • Play/pause button to use on larger video elements
  • An eyeball cursor on a dropdown button
  • An audio cursor for the larger video elements. We have them set to autoplay when triggered by scroll. Clicking on the video will turn on the audio

I used a tutorial from Log Rocket to help me to create the custom cursor. The solution involved creating a custom cursor element and hiding the default cursor. You also need to set up an event listener to track the position of the default cursor and assign that positioning to the custom cursor you create.

The custom cursor element was composed of an SVG with different paths and groups for the different cursor states. I wrote a script with mouseenter and mouseleave events to trigger the different cursor states as it interacts with the page.

My teammate Ryan polished it up a bit and created a better animation between the default cursor and the link/button hover cursor.

An example of the “audio” cursor that once the user clicks will turn on the audio for the large video that autoplays when user scrolls to it on the page.

The new LGND site will soft launch tomorrow (Monday, June 12). We will start promoting the new site in the weeks that follow. I am really glad that I got to be part of this project and to put my fingerprints over through the animations and other layout improvements. The site was a team effort that involved most of the development team, all of the design team, our video/animation team, and several project managers and strategists.

I want to give a special shout-out to Ross. He did the bulk of the development work for the site and learned a lot about building with Gutenberg blocks in the process. This was the first big project that he worked on when he joined the team.

Articles I read

More Tributes to Tim Keller

As I mentioned three weeks ago, Pastor Tim Keller passed away. I shared some articles related to his passing in my previous weeknote post. Here are some more I read the following week (22–27)

Books I am reading or just finished

  • The Creative Act
  • From Strength to Strength – I finished this one on May 26. I was a little disappointed with it. It gave me food for thought but was not practical enough for where I find myself. I would have liked more guidance/help determining the next steps to jump to the next career curve.
  • True to His Word
  • Tearing Us Apart: How Abortion Harms Everything and Solves Nothing – I finished this one this past week.
  • Engineering Management for the Rest of Us – I had looked forward to reading Sarah’s book for a long time before it was released. And I bought a copy when it was released. But by the time it came out, I was reading other things and this subject was not as relevant at the moment. But as I finished up some other reading recently, I decided to pick this up and I am really glad that I did.
  • Design is Storytelling – I had this one on my wishlist for a long time.
  • The Prodigal God (Tim Keller) – About 14 years ago, I had listened to sermons Tim preached that were the basis of this book but had never read the book. It is so rich in the gospel and is full of insights I had never considered about this parable in Luke 15.

What I watched

  • Messiah (Netflix)
  • Paul Hollywood’s Big Continental Roadtrip (Netflix)
  • Great British Baking Show Junior (Netflix)
  • Across the Spider-Verse (Theater) – I like this one more than the original. Both the story and the visuals are so rich.
  • Break Point (Netflix)
  • King of Collectibles (Netflix)
  • Star Wars: Rebels (Disney+)
  • Into the Spider-Verse (Prime)

What I played

  • MLB The Show 21 (Rays) – I started a new franchise season with the Rays and really enjoyed playing with this team. I had played an entire season of MLB The Show 20 with the Rays and the roster has a majority of the players from that team. I have been tempted to buy MLB The Show 23, as it has recently been on sale but think I am going to stick with what I already own.

Comment on this post