Motion Design

Code Q Website Header Animation

https://JemMaybank.b-cdn.net/Code%20Q%20Website%20Header%20Animation%20V7_3.mp4

Client

Code Q

A homepage Header animation to showcase Code Q's best work and services.

Working with Code Q, a Vienna-based Web Design Agency on their new website and updated brand. Code Q needed a refreshed Header Animation to showcase their best projects key messaging and results that they've achieved.

The animation shows the responsiveness of their websites between Desktop and Mobile, and infographics to show how their approach can benefit clients.

Made in After Effects.

(function () { var PLAY = ''; var PAUSE = ''; var VOL = ''; var MUTED = ''; var styleAdded = false; function setup() { var wraps = document.querySelectorAll('.work-header__video-wrap'); for (var i = 0; i < wraps.length; i++) { var wrap = wraps[i]; if (wrap.getAttribute('data-jem-done')) continue; var video = wrap.querySelector('video'); var urlEl = wrap.querySelector('.js-cms-video-url'); if (!video || !urlEl) continue; var url = urlEl.textContent.trim(); if (!url) continue; wrap.setAttribute('data-jem-done', '1'); video.removeAttribute('autoplay'); video.removeAttribute('muted'); video.removeAttribute('loop'); video.removeAttribute('controls'); video.setAttribute('preload', 'metadata'); video.src = url; video.load(); if (!styleAdded) { styleAdded = true; var s = document.createElement('style'); s.textContent = '.jem-controls{position:absolute;bottom:1rem;right:1rem;display:flex;gap:.5rem;z-index:100;pointer-events:none}.jem-btn{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s}.jem-btn:hover{background:rgba(0,0,0,.75)}'; document.head.appendChild(s); } (function (w, v) { var bar = document.createElement('div'); bar.className = 'jem-controls'; var pBtn = document.createElement('button'); pBtn.className = 'jem-btn'; pBtn.innerHTML = PLAY; pBtn.setAttribute('aria-label', 'Play'); var mBtn = document.createElement('button'); mBtn.className = 'jem-btn'; mBtn.innerHTML = VOL; mBtn.setAttribute('aria-label', 'Mute'); bar.appendChild(pBtn); bar.appendChild(mBtn); w.appendChild(bar); function syncPlay() { pBtn.innerHTML = v.paused ? PLAY : PAUSE; pBtn.setAttribute('aria-label', v.paused ? 'Play' : 'Pause'); } function syncMute() { mBtn.innerHTML = v.muted ? MUTED : VOL; mBtn.setAttribute('aria-label', v.muted ? 'Unmute' : 'Mute'); } pBtn.addEventListener('click', function () { v.paused ? v.play() : v.pause(); }); mBtn.addEventListener('click', function () { v.muted = !v.muted; }); v.addEventListener('play', syncPlay); v.addEventListener('pause', syncPlay); v.addEventListener('volumechange', syncMute); syncPlay(); syncMute(); })(wrap, video); } } window.Webflow = window.Webflow || []; window.Webflow.push(function () { setup(); setTimeout(setup, 500); }); })();