LGND

Bringing an Idea to Life:
Case Study Isometric Animation

LGND Campfire - July 28, 2023

Original Writeup on my Blog

The beginning

I was asked by Mike to bring the design of the new LGND site to life through animation work.

Inspiration

Principal Media Video Catalog Block

First Try

Codepen Example

New Inspiration

“Isometric projection”

How to Create an Isometric Layout With CSS 3D Transforms

Play around with the demo to better understand the rotations

Isometric Demo from the Article

Building my own demo

My isometric demo using images from tutorial

More Art than Science

Sometimes nothing beats opening up dev tools and just playing around until you get the result you are looking for.

Adding TPD Screenshots and Adjusting

My isometric demo using images from project

Will We Use It?

Sean's Solution with Video

Pros:

  • We just add screenshots from the project to WordPress and it is quick to get up and running.
  • Less production time than video team creating new video for each case study.
  • Responsive
  • Shows off what kind of solutions we can offer.

Cons:

  • Performance: All those images files add up and add a lot of weight to the page. Video solution might be more effective for performance.