Soss Hinge Calculator Animations

Animation Tests for Soss Calculator

Customized Web Design

This project was initiated through a Marketing Agency. They were looking to replace MPEG animations with annoying audio cues. I love the opportunity to build new animations in SVG and took on the challenge using GSAP.

Working Prototypes

A great way to test and demonstrate the work to my customer was in Codepen, embedding the animations in an outside page to add details. Find embedded examples from Codepen in my documentation. These were prototypes; the form of the final animation differs to deliver a consistent interface for the calculator form.

Embedded SVG animation tests for the Soss Calculator, created in

The Project

Design Details

The hinge calculator update was sought after by the manufacturer because their customers are not technically savvy to accurately make these measurements themselves. The calculator form includes four ‘Help’ buttons where each animation is triggered and runs through a simple motion, to demonstrate width, height, weight and depth measurements. With the measurements, visitors will be able to calculate what hinge and how many are needed to meet their needs.

Each animation focuses on the simplest way to show measurement. I use a masking animation or clip-mask. By using a fixed door position, continuuity is maintained.

Site Details

Description: Soss® Invisible Hinge is an innovative door hardware component with fire rating and a broad range of metallic finishes.

Platform: WordPress, Greensock (GSAP)

Live URL: Soss Hinge Calculator (click on the Hinge Calculator button)


Latest Improvement

I am working with this client on an improvement to their calculator when it delivers the hinge results. A new interface will appear directing visitors to either visit the product in the catalog or see a page displaying and promoting the continuity of a product from its range of finishes to variations based on application. It even includes a gimbal-based 3D model by Servex. Due to conditions outside our control, there have been delays deploying it. We think soon we can take this live.


About Soss

During the past century, the Soss® name has become the worldwide standard for invisible hinges. The concealed hinge is widely used on jewelry cases, humidors, bookshelves that swing open to reveal hidden rooms, and cargo holds on ship decks.

Soss is a privately held corporation specializing in the manufacture and distribution of Soss® brand products including Invisible Hinges and ADA Compliant Door Latches.