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
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
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.
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.
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
- Death is not fun
- Vibe Check #27 (Dave Rupert)
- Make It AND Break It: A Breakout Session Recipe That Maximizes IRL Time – Viget shares some tips based on how they do breakout sessions at their in-person retreats.
- Color Outside the Lines with Partial Circular Gradient Image Borders
- Thoughts From CSS Day (Michelle Barker)
- The continuing tragedy of CSS: thoughts from CSS Day 2023 (Paul Robert Lloyd)
- CSS! CSS! CSS! (CSS Day – Manuel Matuzovic)
- Days of Styles and Standards (Jeremy Keith about CSS Day)
- Inspirational Websites Roundup #46 (codrops)
- The only accessibility specialist in the room
- Getting Communicated At (Chris Coyier)
- The Day I Told God No
- Reclaiming the Remarkable Power of Liturgy
- Okayness and Holiness
- Is the Church Too Complacent in Our Time of Crisis?
- Christianity Challenges the (Stoic) Spirit
- Is Disney’s ‘The Little Mermaid’ a Trans Fable? (The Gospel Coalition)
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.
- Can MLB, and the A’s specifically, work in Las Vegas? Bryce Harper gives his hometown view
- Rosenthal: MLB owners have a chance to question A’s move to Vegas; plus trade deadline decisions
- Cardinals World Series hero David Freese withdraws candidacy for induction into team Hall of Fame
- MLB commissioner Rob Manfred needs to read the room
- MLB trade deadline priorities: The biggest needs for all 30 teams
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
- The Creative Act
- True to His Word
- Engineering Management for the Rest of Us
- Design is Storytelling
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.