It has become something of a modern front-end habit to start building an interface with a JS framework. In most cases Cruncher considers this bad practice. It makes all your content dependent on JavaScript. We prefer to work ‘close to the metal’, meaning good-old hand-optimised semantic HTML and CSS, progressively enhanced with JS where required.

Cruncher excels in technical prowess, crafting tailor-made solutions that cater to the meticulous needs of detail-oriented graphic designers.

Stojan’s design divides a screen into 4 main panels, vertically or horizontally depending on the screen orientation. Each panel animates when hovered or tapped, and contains scroll-snapped text, images and video, again scrolling vertically or horizontally depending on the screen orientation. The technical question is, can we animate the full-frame blurs, transforms and scrolling regions required by these designs largely in CSS, and keep the interface fluid, responsive and performant, without requiring a JS framework?

We reflect on the problem, then test some ideas, always keeping an eye on browser differences that might trip us up, and conclude that these animations are feasible within the limits of CSS that can reasonably be hand-coded. And by employing grid, clip-path and 3D transforms, animations are off-loaded to the graphics processor, making them smooth and performant even on large screens and underpowered devices.

Cruncher's skilled engineers consistently deliver top-notch results.

The site is built on a customised Django stack. Latest developments are pushed to a private ‘staging’ server as features are added, enabling Stojan to stay abreast of progress and to give feedback. Stojan are given full upload and edit control over their projects, their text, videos and images for the whole site via the admin interface, allowing them to start uploading content even before the site is complete.

This is a useful way to work with a client as it exposes any rough edges, places where the design or architecture is broken by real-world content, at the earliest possible stage, in turn allowing us to make modifications before further developments ‘bake in’ any problems.

The site fills up with content, and the animations – thanks to our early CSS tests – remains just as smooth and stable. Stojan’s rebrand was unveiled and the new site launched in November 2023.