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.
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.
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 focused on the simplest way to show measurement. I settled on a masking animation or clip-mask. By using a fixed door position, continuuity is maintained. Codepen.io is a great platform for finding SVG animation examples to evaluating and displaying your own work.
Description: Soss® Invisible Hinge is an innovative door hardware component with fire rating and a broad range of metallic finishes.
Platform: Codepen.io, Greensock (GSAP)
Staging URL: https://shrinkray.com/door
Soss is a privately held corporation specializing in the manufacture and distribution of Soss® brand products including Invisible Hinges and ADA Compliant Door Latches.
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.