Illustration and animation

The pictures we make and use.

 

 

We minimise the use of photos on our website, using bespoke illus­tra­tions instead. Our illus­tra­tions take inspir­a­tion from the same places as the rest of our brand: Saul Bass movie posters and Bauhaus.

We create bold, colourful, abstract or semi-abstract illus­tra­tions using cut-out shapes. We juxta­pose the preci­sion of digital with the organic, human nature of homemade craft.

Texture suggests ink and the rough surface of paper.

We use cutouts for framing screen­shots too.

Animation

We use anim­a­tion subtly: anim­a­tions are slow and smooth and use ease.

We use Scroll­Trigger and GSAP. The libraries are added to the head of the site, and JavaS­cript in the head creates a CSS custom prop­erty that knows the percentage of the page that’s been scrolled.

Two CSS classes (.rotate-on-scroll and .rotate-forever) can be used to imple­ment simple anim­a­tions. More complex anim­a­tions are obvi­ously possible.

Hover states in Divi are also used to set a slow fade from one colour to another on hover.

JavaScript for fade-in

<script>
jQuery(document).ready(function($){
 
gsap.from(".svg-image", {duration: 12, opacity:0, y:150, rotate: 30, ease:"back"});
  
});
</script>