Principal Media Interactive Catalog

May 19, 2023

Back in November, LGND launched a new site for Principal Media. The initial design and plan for the site was to include an interactive catalog of Principal Media’s and Chesler/Perlmutter’s films, documentaries, and TV series. But with a quick turnaround schedule for development, we agreed to hold off on the interactive catalog and add it to the site in the future.

The interactive catalog allows content buyers to view Principal Media + Chesler/Perlmutter’s vast catalog of offerings. Traditional networks from A&E to Discovery, and new streaming services like Curiosity Stream and Tastemade all source content from Principal Media.

We re-engaged with the Principal team at the end of February and we launched the interactive catalog several weeks ago on April 26. I met with the team the next day to train them on how to manage and add new content to their site.

Homepage Marquee Block

One of the features we added to the site for the interactive catalog was a “marquee” block on the homepage in which titles from both the Principal Media and Chesler/Perlmutter catalogs move across the page in opposite directions, much like a marquee element.

As I built out the block, I decided to experiment a bit with the layout. I rotated the parent container -5 degrees (transform: rotate(-5deg)). I liked how the change gave more interest to the page element. I consulted with the designer, Karissa, and she liked the look of the rotated container.

As I researched how to build the animated marquees, I found that there were two different approaches:

• CSS animation to animate the elements across the screen
• Javascript animation

CSS Option

As I looked at the CSS animation option, one thing I learned is that you needed to clone some of the elements to have a seamless animation across the screen. The animation does not loop until the last element leaves the screen on the left or the right. Without the cloned elements, there would be a gap in the animation when it loops (see example Codepen).

I found this Codepen of a marquee scrolling element that used a combination of CSS and JavaScript. The script was used to clone a number of elements from the marquee to fix the gap problem.

One way this solution fell short is that it did not provide the flexibility to display a different number of items at different viewport sizes. I knew I was going to need to add some additional scripting to add this flexibility. So I decided to explore a Javascript-animated solution with GreenSock.

GreenSock Approach

As I researched how others had done something similar in GreenSock, I found a reference to a helper function created for just this type of “marquee” scrolling.

See the Pen Images horizontalLoop() helper function for seamless looping (responsive) by GreenSock (@GreenSock) on CodePen.

After adding GreenSock and writing the script I needed for my solution, I noticed that the elements had a bit of a jerk on the left-hand side (you can observe it in the Codepen above). The jerky motion was even more prominent with my layout which was rotated -5 degrees.

The helper function puts a transform on the individual “cards” whereas the CSS animation solution only puts the transform on the parent container. I felt like the CSS animated solution was much smoother and decided to go back to it after trying the GreenSock route.

Final Solution

For my final solution, I decided to go back to the CSS option. I decided to clone all the elements in the marquee so that the animation would work well with responsive viewports. It added a little more code weight to the page but it made for a good tradeoff for the animated solution.

New Interactive Catalog Page

The key part of this project was the interactive catalog page. We chose to create two separate catalogs, one for Principal Media content and one for Chesler/Perlmutter content. This helped to solve one problem that we had in that all the C/P content had poster thumbnails and the Principal Media content had landscape thumbnails.

I created two separate custom post types in WordPress for the different catalogs. I was then able to change my query for which catalog to display based on the user’s preference with the Principal Media catalog being the default. Visitors to the catalog can filter by genre, search, and sort by production date or title.

I had originally set up the filtering so that multiple genres could be selected. But the client came back to us and asked if we could change it to only filter one genre at a time. It made more sense based on their audience and it was an easy fix to implement.

Individual Video Page

Each video in the library has its own individual page where content buyers can watch a trailer or screener (if available) of the video content. The page looks very much like the video interface of Netflix or Amazon Prime. Readers can also explore other titles in the genre and find out more information about the specific title.

The videos play in a modal. I have started using the dialog element this year for modals. I had been hesitant to embrace the dialog element in the past over some accessibility concerns but decided to give them a go after Scott O’Hara gave them his blessing in January. I really like the out-of-the-box functionality and accessibility that the element provides.

Postscript

This project was a lot of fun to work on and I am very happy with the premium product that we delivered. The Principal Media team did a lot of heavy lifting to gather the content and images for each title in the catalog. Gathering and creating those assets helped to bring our idea to life.

It is always a joy to work with my colleague, Karissa. I love the collaboration that we have that grows and evolves the final product beyond what either of us could do on our own. I appreciate Thalia‘s hard work managing the project and communicating with the Principal Team. She also helped me to build out the catalog in WordPress.

And I appreciate the other developers on my team who are always eager to help answer a question or help me with code suggestions or insightful suggestions of how to push the solution just a little bit further.

You can read more about my process of building the marquee block from my weeknote on March 21