Jigx Homepage

The website design needed to focus on the ease of use of the product. The customer consciously refrained from using a lot of text. Long, technical explanations were replaced with graphics. To keep the page from being drowned in a flood of graphics, we decided to use a combination of 3d WebGL models showing videos. This allowed us to show even the more complicated parts of the Jigx App in one place. The design borrows strongly from the widgets used in the app. Minimalistic and simple.

At first, we optimized a 3d model of a smartphone in Cinema4D so it could be in a WebGL context used with decent performance. To reduce the file size the model was exported as a GLTF file and compressed using Draco-compression.

On the website the 3d model is embedded in multiple containers and displays videos of apps build with Jigx. The connection to the scroll browser’s scroll position ensures that the video and animations play exactly when the user reaches them on the page. For small details, additional animations were created in After Effects and embedded as SVG animations using Lottie. All of this is controlled by the Javascript animation framework GSAP, which monitors the user’s scroll position, moves the website’s components, starts the animations, and turns the 3d models.

To allow the customer to manage and update the website themselves, Wordpress was used as a content management system. An additional pagebuilder (Elementor Pro) allows for quick and flexible design options with its functionality.

The completed website was handed over the to the customer who takes care of hosting it themselves. It can be viewed at jigx.com.