Weeknotes 23:17

June 19, 2023

Week of June 11–17

Isometric layout and animation

One of the elements of the new LGND site is an image on the case studies page that shows several screenshots of the design of the project in an isometric projection (see image above).

As I was thinking about how we elevate these pages from being more of a static presentation, I thought that it would be really cool to animate the screenshots with the rows animating in different directions, much like I did for the Principal Media interactive catalog block shown below.

I started a basic Codepen to play around with the idea of a simple rectangular shape. But I was not able to figure out how to manipulate it to look similar to the images in the layout. I did not have an understanding of how to manipulate CSS transforms to achieve the projection I was after. I also wondered if it might be more performant to have our video team create an animated video to pull this off. At that point, I was going to abandon the idea.

But then in a later conversation, I heard someone refer to the layout as isometric. After hearing the word, I did a Google search on how to do an isometric layout with CSS. Sometimes you just need to know the right thing to search to research if something can be done.

One of the first results was for a tutorial on Envato’s Tuts+ site. I had time to look at the tutorial on Wednesday and thought I would give it another shot.

I started by playing around with the demo of the tutorial on the Tuts+ site. Having a working model was helpful for me to better understand how using rotateX and rotateZ affected the element (I realized I did not need to use rotateY to achieve the projections I was looking for). I tried some different values to see how the object moved around the different axes.

After playing around with the tutorial, I decided to build my own using the images from the tutorial since I did not have screenshots from any of our case studies. I built out the layout and tried some different values for rotateX and rotateZ. But it still was not quite like the projection in the case study image. I ended up adding a skewX to the layout and got more of the look I was wanting.

Here is the HTML structure I started with:

<div class="row">
  <article>
    <img>...
  </article>
  <article>...
</div>

I applied the CSS transform to the row: transform: rotateX(40deg) rotateZ(-18deg) skewX(12deg);

The next thing I tried to do was to animate the row. But the problem that I ran into was that the animation went straight across the screen and not at an angle. I realized that I need a container around the row to animate the layout at an angle. I ended up adding two containers around the row to get the animation to work.

The reason that I did 2 containers is that I rotated the first one -14 degrees and then rotated the second one 14 degrees to counter the rotation of the first so that the isometric row would display as I intended. I came up with the 14 degree rotation by trial and error. I then animated the first container using a technique I had used on the Principal Media project.

But I was not getting a clean continuous animation like I had gotten with the Prinicipal Media solution. I decided to set it aside for a couple of days and then came back to it on Friday.

As I thought through it, I realized that the isometric projection and transform that I had done on the row made each item wider than what they would be without the transform. I ended up just experimenting with different numbers and finally found the difference that made the animation run smoothier. My experiments were in pixels but then I was able to make it into a vw unit so that the solution would work responsively.

Through a lot of trial and error, I finally had a solution that achieved what I had set out to do. It involved much more art than science and I am sure there are other ways that I could have done it. The solution is not perfect. There still seems to be a small stutter in the animation and I will probably polish it a bit more.

I am not sure if I will end up using the solution in the project or not. My main concern is performance and page weight because all those images will add weight to the page. I think an animated video would be much better for performance. But I also know that it will be much easier to implement a HTML, CSS, and Javascript solution than to making a video for each different case study.

There is always an intrinsic reward that comes from having an idea and sticking with it till you can work out a solution to fulfill the creative vision you had. So whether I end up using this solution in the wild or not, the process was well worth the time invested.

View Isometric demo
View the code on GitHub

Horrified

That is the word that best captures how I felt on Wedneday night as I sat in a parking lot waiting for my daughter to finish her shift. I decided to use my time waiting to view the LGND site on my phone. I had seen some chatter in Slack earlier in the day with concerns about the mobile experience. I had addressed some layout issues and thought that the problems were fixed. But then I opened the site on my phone…

The mobile experience was awful. There was animations on the homepage that kept refiring every time I tried to scroll. And other pages felt clunky. I was not happy with what I saw. And I felt responsibility because I was the last developer to touch the site before we soft-launched it on Monday. It did not represent the quality of work that I strive for. All the feelings of elation I felt for “successes” in bringing the site over the finish line sunk into the pit of my stomach. It felt like an epic failure.

The main problem is that I had not tested the site on an actual mobile device. I had tested it on a mobile view in Firefox Dev Tools. I had thought that I had at least tested it in an iPhone simulator that comes with XCode. But I had missed it. And I think the problem is that nobody had tested it on a real device. The interactions were much different on the actual device than the experience of just testing it in Dev Tools.

When I talked to one of the managing partners the next day, he was very gracious about it. He told me that he knew that there were issues with the mobile and that is one of the reasons that he made the call to soft-launch the site. He appreciate the contribution that I had made and we came up with a strategy to quickly address the problem.

We decided to remove the animations from the mobile experience. I spent Friday adding code to our scripts to run the animations once the screen width was 768 pixels, targeting larger tablets. The site was a much better experience on mobile without the animations. We did run into some issues with some cache busting not working but were finally able to clear caches so that most team members were able to see the improved mobile experience and I could feel better about taking a five-day weekend.

The lesson I learned: always test on real devices.

Caught my eye

Mike Aleo shared this site with the development team last week. It was making the rounds on social media. I really how the animations contribute to the storytelling of this product. I liked the scaling of elements both in and out. Something to consider for future projects.

Articles I read

The Athletic – Articles I read

Several times over the last 2 to 3 years, I have been interested to subscribe to The Athletic. They have some top-notch writers and I have been very interested in their baseball coverage. Ken Rosenthal is one of my favorite baseball reporters and he has been with The Athletic from very early on. I finally decided to take them up on one of their deals, one year for $1 a month. I just subscribed on Saturday but here are some articles I read.

What I watched

  • Arnold (Netflix) – I found this documentary about the life of Arnold Schwarzenegger very interesting.
  • American Pickers (Defy)
  • Barbeque Showdown Season 2 (Netflix) – We watched season 2 before season 1 and enjoyed it much more.
  • Barbeque Showdown Season 1 (Netflix)

Books I am reading

What I played

  • MLB The Show 21 (Rays) – I did not enjoy playing this game as much this past week as I lost 5 out of 7 games. My offense was not there and I got beat up by the Yankees and Blue Jays. I enjoyed playing the Royals because it was at Kauffman Stadium, where I grew up watching baseball. I played my first season of MLB the Show with the Royals so saw a lot of Kauffman Stadium that year.

Comments are closed.