Jumping in to help with the new LGND site

June 11, 2023

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 amid 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 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 added 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.

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.

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 he worked on when he joined the team.