Loading ...

Responses by Louis Paquet, creative director; Antoine Boulanger, creative developer; and Frédéric Marchand, president and creative director, Locomotive.

Background: This project is the result of an amazing collaboration between Pangram Pangram Foundry and Locomotive—something we had wanted to try for a while. Following the launch of the Editorial New typeface, Locomotive created this digital showcase: a full experience using the new retro variable font set in full effect. The target audiences are designers, art directors, developers and students in various fields from graphic design to digital development, which is why we chose a highly graphic and interactive experience to showcase the product. The font, free to try, can be found here.

Design core: The whole design revolves around the use of Editorial New and the typeface’s creative capabilities with subtle interactions and a playful navigation system around the theme of retro editorial advertising. By featuring the fairly new concept of variable typography, the site brought loads of creative possibilities for microinteractions and animations by manipulating visual font variations—weight, size and spacing, to name a few—in real time using code.

Special kudos are deserved to the editorial advertising creator, which is an excellent piece of this experience and an homage to the retro editorial style of the mid-eighties.

Favorite details: Working on such an exciting product with Pangram Pangram enabled us to push the envelope to the very end. From the beginning, the spinning newspaper interactive animation that lands on the scroll makes a clear statement on the level of attention we wanted to put into this project. The invert mode is also a must-try for those who aren’t afraid of the dark.

Challenges: The spinning newspaper uses the Locomotive Scroll as a code base to create a custom effect for this specific project. It enabled us to spend time on more creative coding for this set of interactions and handle the basic functionalities with the locomotive-scroll library.

Since this was a pro-bono project, as much as we wanted to fully express our creativity, it had to come with some time constraints. This forced us to make some difficult choices without compromising the final result.

Technology: Not only does the Locomotive Scroll manage the spinning newspaper with the on-scroll function, the folding animations, the parallax effects on the screen section, the sticky elements and triggering interactions—when the section is in the viewport—are all managed by it as well. We used our library in conjunction with modularJS, which is a small JavaScript framework we built to use the coding language in a modular way. It enables us to easily add scoped events, select or update elements and call other modules. Finally, we experimented with variable fonts to animate the font’s weight. We animated it both while users move their cursors and while they scroll down the page.

editorialnew.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In