PageSourceSearch

https://oksocial.webflow.io/projects

html oksocial.webflow.io collected 2026-10-03 13:33:05 UTC 55,290 bytes, 715 lines download raw bytes

1<!DOCTYPE html><!-- Last Published: Thu Sep 17 2026 10:52:31 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="oksocial.webflow.io" data-wf-page="66caf929861574210fbc6fcd" data-wf-site="66caf929861574210fbc6f4d" lang="en"><head><meta charset="utf-8"/><link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>Projects | Animation Studio London | Motion Graphics</title><meta content="We craft health animations and motion graphics that bring complex medical concepts to life. London-based animation agency, OK Social." name="description"/><meta content="Projects | Animation Studio London | Motion Graphics" property="og:title"/><meta content="We craft health animations and motion graphics that bring complex medical concepts to life. London-based animation agency, OK Social." property="og:description"/><meta content="https://cdn.prod.website-files.com/5e2987d164852b030fdb60a8/65b54214fe1ff665b807861a_Untitled-1.jpg" property="og:image"/><meta content="Projects | Animation Studio London | Motion Graphics" name="twitter:title"/><meta content="We craft health animations and motion graphics that bring complex medical concepts to life. London-based animation agency, OK Social." name="twitter:description"/><meta content="https://cdn.prod.website-files.com/5e2987d164852b030fdb60a8/65b54214fe1ff665b807861a_Untitled-1.jpg" name="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="IS5XUKqX87x_4gkdzq5pVeJ7weLh-VpuEHxk3uNeBaI" name="google-site-verification"/><link href="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/css/oksocial.webflow.shared.0097c942d.min.css" rel="stylesheet" type="text/css" integrity="sha384-AJfJQtAyY1ZZ9cqquOFVzbxkt2XczUUhkPrAqx8zBAViBp3tlrS2YaHOc24E73y6" crossorigin="anonymous"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>
1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
1<script type="text/javascript">WebFont.load({  google: {    families: ["PT Sans:400,400italic,700,700italic"]  }});</script>
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://cdn.prod.website-files.com/5e2987d164852b030fdb60a8/63e7a72baed3c66f92303260_Favicon_32x32.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/5e2987d164852b030fdb60a8/63e7a4aee006821660f0b7dd_Webclip-256x256.jpg" rel="apple-touch-icon"/><link href="https://www.oksocial.co.uk/projects" rel="canonical"/>
1<script>(function(w,i,g){w[g]=w[g]||[];if(typeof w[g].push=='function')w[g].push.apply(w[g],Array.isArray(i)?i:[i]);})(window,['G-5EX4PHCZM4','UA-166100989-1'],'google_tags_first_party');</script>
1<script async="" src="/haqt6iy0yx2eNjZjYWY5Mjk4NjE1NzQyMTBmYmM2ZjRk/iEnio3xclPPVyD92-vXRbnHyvHo"></script>
1<script async="" src="/haqt6iy0yx2eNjZjYWY5Mjk4NjE1NzQyMTBmYmM2ZjRk/iEnio3xchp_NvFF0m42iDQT_pp68eg"></script>
1<script type="text/javascript">window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('set', 'developer_id.dZGVlNj', true);gtag('set', 'developer_id.dYWYxNW', true);gtag('js', new Date());gtag('config', 'G-5EX4PHCZM4');gtag('config', 'UA-166100989-1', {'anonymize_ip': false});</script>
1
2
3
4<!-- Google Tag Manager -->
5
6<script>
vendor: 327 bytes, lines 6-10
6(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
7new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
8j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
9'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
10})(window,document,'script','dataLayer','
10GTM-598FFGX
vendor: 3 bytes, line 10
10');
10</script>
10
11<!-- End Google Tag Manager -->
12
13<meta name="p:domain_verify" content="b91df0cbdb014f5e706abb1525ca2170"/>
14
15
16<meta name="msvalidate.01" content="38DA8FFFF9D52A1C9236A51CEFEE7542" /> 
17<script type="application/ld+json">
18{
19  "@context": "https://schema.org/",
20  "@type": "Organization",
21  "url": "https://www.oksocial.co.uk/",
22  "logo": "https://cdn.prod.website-files.com/5e2987d164852b030fdb60a8/5f69dad6252850d0806eaa55_OK-Social-Logo.svg",
23  "name": "OK Social",
24  "image": "https://cdn.prod.website-files.com/66caf929861574210fbc6f91/66caf929861574210fbc7193_Nakd_16x9_Cutdown_01.jpg",
25  "email": "[email protected]",
26  "description": "OK Social is the leading 2D Animation Studio in London, UK. Our expert team creates stunning animations to boost your brand & engage your audience. Contact us!",
27  "address": "4th Floor, Silverstream House, 45 Fitzroy Street, London, W1T 6EB",
28  "telephone": "+44 (0)20 8058 9479",
29  "sameAs": [
30    "https://vimeo.com/oksocial",
31    "https://twitter.com/oksocial_",
32    "https://www.instagram.com/oksocial_",
33    "https://www.linkedin.com/company/ok-social",
34    "https://www.youtube.com/@oksocial"
35  ],
36  "contactPoint": {
37    "@type": "ContactPoint",
38    "contactType": "customer service",
39    "telephone": "+44 204 358 0022",
40    "areaServed": "GB",
41    "availableLanguage": "en",
42    "email": "[email protected]"
43  }
44}
45</script>
45 
46
47<!-- Hotjar Tracking Code for https://www.oksocial.co.uk/ -->
48
49<script>
vendor: 125 bytes, lines 49-52
49
50    (function(h,o,t,j,a,r){
51        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
52        h._hjSettings={hjid:
522296383
vendor: 258 bytes, lines 52-57
52,hjsv:6};
53        a=o.getElementsByTagName('head')[0];
54        r=o.createElement('script');r.async=1;
55        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
56        a.appendChild(r);
57    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
58</script>
58
59
60
61<!--
62<style>
63
64
65::-webkit-scrollbar {
66  width: 10px;
67}
68
69
70::-webkit-scrollbar-track {
71  background: #ffffff;
72}
73
74
75::-webkit-scrollbar-thumb {
76  background: #44e460;
77  border-radius: 0px;
78}
79</style>
80-->
81
82
83<style>
84html.lenis {
85  height: auto;
86}
87.lenis.lenis-smooth {
88  scroll-behavior: auto;
89}
90.lenis.lenis-smooth [data-lenis-prevent] {
91  overscroll-behavior: contain;
92}
93.lenis.lenis-stopped {
94  overflow: hidden;
95}
96</style>
97
98<!-- Finsweet Cookie Consent -->
99<script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="opt-in"></script>
99
100
101
102<style>
103::selection {
104  background: #44e460; /* WebKit/Blink Browsers */
105}
106::-moz-selection {
107  background: #44e460; /* Gecko Browsers */
108}
109</style>
110
111
112  <style>
113    /* Letter styling */
114    .letter {
115      display: inline-block;
116      opacity: 0;
117    }
118
119    /* Word spacing styling */
120    .tricksword {
121      white-space: nowrap;
122    }
123
124    /* Fade-up animation setup */
125    .fade-up {
126      opacity: 0; /* Hidden initially */
127      transform: translateY(50px); /* Start slightly offset */
128    }
129
130    .fade-up.active {
131      opacity: 1; /* Become visible */
132      transform: translateY(0); /* Slide into view */
133      transition: all 0.5s ease-out;
134    }
135  </style>
136
137<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
137
138
139<script type="text/javascript" src="https://app.lemlist.com/api/visitors/tracking?k=2ZP59HLfdvNm4Fu9NvLABTwRb14bl7Z4IPOsIgOfdmI%3D&t=tea_eLyTcgBpZK2MqTn9x"></script>
139
140
141
142<!-- Apollo Tracking Code -->
143
144<script 
145tr-color-vars="background,text,brand,card-sub,footer" 
146duration="0.5" 
147ease="power1.out" 
148src="https://cdn.jsdelivr.net/gh/flowtricks/[email protected]/dark-mode-toggle.js">
149</script>
149
150
151<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" defer></script>
151
152
153<script>function initApollo(){var n=Math.random().toString(36).substring(7),o=document.createElement("script");
154o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,o.async=!0,o.defer=!0,
155o.onload=function(){window.trackingFunctions.onLoad({appId:"6760402b97e8fc02ce723199"})},
156document.head.appendChild(o)}initApollo();</script>
156
157<meta charset="UTF-8"></head><body><div data-collapse="medium" data-animation="default" data-duration="600" data-doc-height="1" data-easing2="ease-in-quart" data-easing="ease-out-quart" role="banner" class="navigation w-nav"><div class="navbar"><div class="padding-global is-navbar"><div class="container-large"><div class="nav-div"><a href="/" class="logo-link link-hover-ix-copy w-inline-block"><div class="logo-html is-hide w-embed"><?xml version="1.0" encoding="UTF-8"?>
158<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1170 144.5" fill="currentColor">
159  <path d="m207,.25h28.18l-.82,51.43-4.32,37.65h1.65c4.25-10.42,8.95-19.47,14.09-27.16,5.14-7.68,12.37-16.46,21.7-26.33L297,.25h34.35l-50.91,56.57,52.77,87.43h-32.71l-39.81-68.71-25.3,24.89v43.82h-28.39V.25Z"/>
160  <path d="m855,.12h28.83v144h-28.83V.12Z"/>
161  <path d="m948.75.12h46.58l48.67,144h-30.5l-8.77-24.27c-.7-2.33-1.15-4.32-1.36-5.97-.21-1.65-.18-3.22.1-4.73v-.21h-62.87v.21c.28,1.51.31,3.09.1,4.73s-.66,3.64-1.36,5.97l-8.56,24.27h-30.71L948.75.12Zm50.76,89.9v-1.03c-2.65-2.88-5.36-8.78-8.15-17.69l-1.46-4.32c-2.92-9.19-6.3-19.99-10.13-32.4-3.83-12.41-6.09-20.47-6.79-24.17h-1.88c-.56,3.7-2.75,11.76-6.58,24.17-3.83,12.41-7.28,23.21-10.34,32.4l-1.25,4.32c-2.79,8.92-5.5,14.81-8.15,17.69v1.03h54.73Z"/>
162  <path d="m1062,.12h28.83v123.53c.7-1.67,1.95-2.75,3.76-3.24,1.81-.49,3.97-.73,6.47-.73h68.94v24.44h-108V.12Z"/>
163  <path d="m505.52,71.32c-8.93-4.57-22.06-6.82-38.33-9.29-17.92-2.4-29.37-4.7-34.05-6.86-5.01-2.21-7.24-6.17-7.24-12.87,0-11.47,12.61-18.88,32.12-18.88,21.33,0,31.69,9.01,31.69,27.56v1.98h27.52v-1.98c0-34.61-18.95-50.72-59.64-50.72-37.42,0-61.59,17.32-61.59,44.12,0,12.88,5.34,23.16,15.03,28.93,8.7,5.3,25.5,8.37,38.06,10l3.49.46c11.55,1.53,24.63,3.26,30.95,5.64,6.01,2.04,8.58,5.68,8.58,12.18,0,13.12-11.22,19.5-34.29,19.5s-33.86-8.69-33.86-27.35v-1.98h-27.52v1.98c0,23.05,10.69,50.52,61.59,50.52s63.97-24.1,63.97-44.32c0-13.26-5.85-23.41-16.48-28.6Z"/>
164  <path d="m663.08,19.3c-12.96-12.28-31.14-19.05-51.18-19.05-42.33,0-71.9,29.35-71.9,71.38,0,21.64,7.22,40.05,20.88,53.25,12.93,12.49,31.05,19.37,51.01,19.37s38.24-6.88,51.19-19.37c13.68-13.19,20.91-31.6,20.91-53.25s-7.23-39.36-20.92-52.33Zm-8.03,52.33c0,28.27-17.75,48.01-43.15,48.01s-42.95-19.74-42.95-48.01,17.66-46.77,42.95-46.77,43.15,19.23,43.15,46.77Z"/>
165  <path d="m810.09,97.9c-4.1,13.16-17.22,21.49-35.2,21.49-25.53,0-43.36-20.41-43.36-48.19s17.42-46.59,43.36-46.59c20.35,0,34.41,11.43,35.99,28.79h26.11c-.67-31.5-26.34-53.4-62.93-53.4-42.84,0-71.62,28.01-71.62,71.2s28.78,72.8,71.62,72.8c34.2,0,58.93-18.6,62.82-46.1h-26.8Z"/>
166  <g>
167    <path d="m178.92,36.3c-6.71-11-16.2-19.72-28.43-26.15C138.25,3.72,124.08.5,108,.5h-27c-16.23,0-30.46,3.18-42.7,9.55-12.24,6.36-21.68,14.98-28.33,25.85S0,58.91,0,72.3s3.36,25.39,10.08,36.4c6.71,11,16.2,19.72,28.43,26.15,12.24,6.43,26.41,9.65,42.49,9.65v-.03l27,.03c16.23,0,30.46-3.18,42.7-9.55,12.24-6.36,21.68-14.98,28.33-25.85s9.97-23.01,9.97-36.4-3.36-25.39-10.08-36.4Zm-24.24,60.17c-4.82,6.69-11.33,11.8-19.52,15.31-3.51,1.51-7.97,2.81-12.73,3.8-6.57,1.37-13.29,1.93-20,1.89l-15.69-.09c-6.73-.04-13.46-.7-20.03-2.14-4.81-1.05-9.35-2.39-12.89-3.86-8.19-3.38-14.7-8.38-19.52-15.01-4.83-6.63-7.24-14.59-7.24-23.87s2.41-17.27,7.24-23.97c4.82-6.69,11.33-11.8,19.52-15.31,4.55-1.96,10.7-3.51,17.01-4.5,4.92-.77,9.89-1.09,14.87-1.09l16.07.02c8.01,0,16,.91,23.77,2.88,3.58.91,6.9,1.96,9.63,3.09,8.19,3.38,14.7,8.38,19.52,15.01,4.83,6.63,7.24,14.59,7.24,23.87s-2.41,17.27-7.24,23.97Z"/>
168    <circle cx="94.5" cy="72.5" r="18.25"/>
169  </g>
170</svg></div><div class="logo_lottie-wrap"><div class="logo_lottie _1st" data-w-id="caf065a6-ff0b-f054-0b88-2c6d582d970d" data-animation-type="lottie" data-src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/66d1abc5d5a014a7a47d5d9b_Logo_Nav_Lottie_01.json" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="3" data-duration="0" data-loading="eager"></div><div class="logo_lottie is-2nd" data-w-id="e7646f7a-1ac4-4e16-97dd-86f7ef8e17eb" data-animation-type="lottie" data-src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/66d55f71af111b4e02f48f4a_Logo_Nav_Lottie_01_Green.json" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="0" data-duration="0" data-loading="eager"></div></div></a><nav role="navigation" class="nav-menu w-nav-menu"><div class="nav-text"><a href="/projects" aria-current="page" class="nav-link-block w-inline-block w--current"><div class="nav-text-box">Projects</div><div class="nav-underline"></div></a><a href="/insight" class="nav-link-block w-inline-block"><div class="nav-text-box">Insight</div><div class="underline-2 _2 is-nav"></div><div class="nav-underline"></div></a><a href="/about" class="nav-link-block w-inline-block"><div class="nav-text-box">About</div><div class="underline-2 _2 is-nav"></div><div class="nav-underline"></div></a><a href="/contact" class="nav-link-block w-inline-block"><div class="nav-text-box">contact</div><div class="underline-2 _2 is-nav"></div><div class="nav-underline"></div></a><a href="/services" class="nav-link-block hide w-inline-block"><div class="nav-text-box">Services</div><div class="nav-underline"></div><div class="nav-underline"></div></a><div tr-color-toggle="" class="theme-toggle-wrapper"><div class="code-embed-5 w-embed"><div class="theme-wrapper">
171  <button id="theme-btn" class="theme-btn" aria-label="Toggle Theme">
172    <svg class="theme-icon" viewBox="0 0 24 24" fill="currentColor">
173      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18V4c4.41 0 8 3.59 8 8s-3.59 8-8 8z"/>
174    </svg>
175  </button>
176</div>
177
178<style>
179/* 1. Icon Sizing & Reset */
180.theme-btn {
181  background: none;
182  border: none;
183  padding: 0;
184  cursor: pointer;
185  width: 20px;   /* Adjust size to match your nav text */
186  height: 20px;
187  display: flex;
188  align-items: center;
189  justify-content: center;
190  -webkit-tap-highlight-color: transparent;
191  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
192}
193
194.theme-icon {
195  width: 100%;
196  height: 100%;
197  color: inherit; /* Icon color matches the current text color */
198}
199
200/* 2. Rotation Animation */
201/* This assumes your JavaScript toggles the 'light-mode' class on the body */
202body.light-mode .theme-btn {
203  transform: rotate(180deg);
204}
205
206/* 3. Hover Effect */
207.theme-btn:hover {
208  opacity: 0.7;
209}
210</style></div></div></div></nav><div data-w-id="484c9dd9-e3a9-b904-18b6-47be25d9b5fb" class="menu-button w-nav-button"><a href="#" class="hamburger-wrapper w-inline-block"><div class="burger-line green"></div><div class="burger-line-middle green"></div><div class="burger-line-bottom green"></div></a></div></div></div></div></div><div class="no-scroll-code w-embed w-script">
210<script>
211// when DOM is ready
212document.addEventListener('DOMContentLoaded', () => {
213 // on .menu-button click
214 document.querySelectorAll('.menu-button').forEach(trigger => {
215  trigger.addEventListener('click', function(){ 
216    this.x = ((this.x || 0) + 1)%2; 
217    if(this.x){ // 1st click
218      document.querySelectorAll('body').forEach(target => target.classList.add('no-scroll'));
219    }
220    else{ // 2nd click (toggle)
221      document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll'));
222    } 
223  });
224 });
225});
226</script>
226
227
228<style>
229  /* Smooth transition for background colors and text */
230  body {
231    transition: background-color 0.4s ease, color 0.4s ease;
232  }
233
234  /* Move the inner circle when the active class is added via JS */
235  .toggle_wrap.is-active .toggle_inner {
236    transform: translateX(100%); /* Adjust % based on your toggle width */
237  }
238
239  .toggle_inner {
240    transition: transform 0.3s ease;
241  }
242</style></div><div class="link-css w-embed"><style>
243a { color: inherit; }
244</style></div><div class="logo-show-hide w-embed w-script"><style>
245  /* Optional: Ensure the second lottie is hidden by default to prevent flicker */
246  .logo_lottie.is-2nd {
247    display: none;
248  }
249</style>
250
251<script>
252(function() {
253  const htmlElement = document.documentElement;
254
255  const updateLottie = () => {
256    const lottieSecond = document.querySelector('.logo_lottie.is-2nd');
257    if (!lottieSecond) return;
258
259    // The logic you requested: Check if 'dark-mode' class exists
260    const isDarkMode = htmlElement.classList.contains("dark-mode");
261
262    requestAnimationFrame(() => {
263      /**
264       * LOGIC:
265       * If Dark Mode -> Show second lottie (block)
266       * If Light Mode -> Hide second lottie (none)
267       **/
268      lottieSecond.style.setProperty('display', isDarkMode ? 'block' : 'none', 'important');
269    });
270  };
271
272  // Run immediately and on page events
273  updateLottie();
274  window.addEventListener('load', updateLottie);
275  document.addEventListener('DOMContentLoaded', updateLottie);
276
277  // Watch the HTML element (not body) for class changes
278  const observer = new MutationObserver(updateLottie);
279  observer.observe(htmlElement, { 
280    attributes: true, 
281    attributeFilter: ['class'] 
282  });
283})();
284</script>
284</div><div class="code-embed-6 w-embed w-script">
284<script>
285document.addEventListener("DOMContentLoaded", function() {
286  
287  const showAnim = gsap.from('.navigation', { 
288    yPercent: -100,
289    paused: true,
290    duration: 0.3,
291    ease: "power2.out"
292  }).progress(1);
293
294  ScrollTrigger.create({
295    start: "top top",
296    end: 99999,
297    onUpdate: (self) => {
298      // self.direction is 1 when scrolling down, -1 when scrolling up
299      self.direction === 1 ? showAnim.reverse() : showAnim.play();
300    }
301  });
302
303});
304</script>
304</div></div><div class="page-wrap"><div class="global"><div data-wf-component-id="1b426f45-2c39-63b9-82b0-d4c8a8296e7f" data-wf-variant-state="base" data-w-id="1b426f45-2c39-63b9-82b0-d4c8a8296e7f" class="page-transition"><div data-wf-target="[[[&quot;1b426f45-2c39-63b9-82b0-d4c8a8296e7f&quot;,&quot;64adef38-ce6d-4d90-2ee0-ac847bae6bef&quot;],[&quot;677e0d3a-5372-ccdb-2e71-910a3aed42b6&quot;]]]" class="wrapper--css" data-w-id="64adef38-ce6d-4d90-2ee0-ac847bae6bef" data-animation-type="lottie" data-src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/66d55f70cd425b52968354b9_Logo_Fotter_Lottie_01_Green.json" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="0" data-duration="0" data-loading="eager"></div></div></div><div class="main-wrap _0-radius"><div class="padding-global is-bottom-zero"><div class="container-large"><div class="projects-wrap left"><div class="hero-h1-wrapper"><div class="heading-intro"><h1 class="h1 is-projects-hero fade-up tricks left">Some of our<br/><span class="text-color-green">favorite</span> projects</h1></div><div class="cta-wrapper"><a href="#" class="lottie-cta w-inline-block"><div data-w-id="f598c01c-f544-af89-4d7e-b6e58066874c" class="cta-box"><div class="cta-text-right">Meaningful motion<br/>that tells your story</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/66caf929861574210fbc703b_Arrow-Right-Green.svg" alt="" class="arrow-down--90 hide"/><div class="arrow-down--90-copy" data-w-id="2fb2777a-4506-751f-6135-969762bc8558" data-animation-type="lottie" data-src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/684adb10ec4803b6f7638f85_3fc872212d898643778d2da5cbd37382_cta-arrow_01.json" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="0" data-duration="3.1166666666666667" data-loading="eager"></div></div></a></div></div><div class="tabs-wrap"><div class="w-dyn-list"><div role="list" class="project-card-grid w-dyn-items"><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/evp-film" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
305" playsinline="
306" muted="muted" 
307preload= "auto"
308loop="loop"
309width=100%
310src="https://stream.mux.com/kO9wm7s7O1CBLi7FtnEUqz3fK01yugouoXHnQALFLiH00/1080p.mp4"
311data-v-767e84ec="
312" autoplay="autoplay">
313</video></div><div class="thevideo w-embed"><video
314  webkit-playsinline
315  playsinline
316  muted
317  preload="none"
318  loop
319  width="100%"
320  style="opacity:0;transition:opacity .2s ease;"
321  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
322  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
323  src="https://stream.mux.com/kO9wm7s7O1CBLi7FtnEUqz3fK01yugouoXHnQALFLiH00/1080p.mp4"
324></video>
325</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee7b0e286d7f91dc5edb_68346ba78b40b2be2e9afe72_68343fa5be9749d427579ea7_BP_Hover_VideoIMG.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">BP</h2><p class="p1 grey new">EVP Film</p></div></a></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/kfc" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
326" playsinline="
327" muted="muted" 
328preload= "auto"
329loop="loop"
330width=100%
331src="https://stream.mux.com/z5v7DCG00xlRqWMV23TC3AS7wrdjtnnFG1d8OM78jTCc/1080p.mp4"
332data-v-767e84ec="
333" autoplay="autoplay">
334</video></div><div class="thevideo w-embed"><video
335  webkit-playsinline
336  playsinline
337  muted
338  preload="none"
339  loop
340  width="100%"
341  style="opacity:0;transition:opacity .2s ease;"
342  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
343  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
344  src="https://stream.mux.com/z5v7DCG00xlRqWMV23TC3AS7wrdjtnnFG1d8OM78jTCc/1080p.mp4"
345></video>
346</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee7cbd895b38d4ebd4c5_6a7f32ca08d77f3d3e8b49e6_6a7c57446794475e387a040b_Hover_Vid-IMG.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">KFC</h2><p class="p1 grey new">The giant chicken that keeps it fun</p></div></a></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/raw-bars" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
347" playsinline="
348" muted="muted" 
349preload= "auto"
350loop="loop"
351width=100%
352src="https://stream.mux.com/wdkMdkz47N51RDloVwoMB9KmYQDxd1HuBLEdXCQD97k/1080p.mp4"
353data-v-767e84ec="
354" autoplay="autoplay">
355</video></div><div class="thevideo w-embed"><video
356  webkit-playsinline
357  playsinline
358  muted
359  preload="none"
360  loop
361  width="100%"
362  style="opacity:0;transition:opacity .2s ease;"
363  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
364  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
365  src="https://stream.mux.com/wdkMdkz47N51RDloVwoMB9KmYQDxd1HuBLEdXCQD97k/1080p.mp4"
366></video>
367</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee7ffa4c8ddc2e731004_66caf929861574210fbc7193_Nakd_16x9_Cutdown_01.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">Nākd</h2><p class="p1 grey new">Healthy brand that packs a punch</p></div></a></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/payscale" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
368" playsinline="
369" muted="muted" 
370preload= "auto"
371loop="loop"
372width=100%
373src="https://stream.mux.com/idyyL00rM02D2FADsT502cQu01SMypME4UWv025sCwcZ6e8Q/1080p.mp4"
374data-v-767e84ec="
375" autoplay="autoplay">
376</video></div><div class="thevideo w-embed"><video
377  webkit-playsinline
378  playsinline
379  muted
380  preload="none"
381  loop
382  width="100%"
383  style="opacity:0;transition:opacity .2s ease;"
384  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
385  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
386  src="https://stream.mux.com/idyyL00rM02D2FADsT502cQu01SMypME4UWv025sCwcZ6e8Q/1080p.mp4"
387></video>
388</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee739cf71f5d88430834_684dcc4c22bad9559d1af0cf_Payscale_Brand_Film_V2_03.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">Payscale</h2><p class="p1 grey new">Brand launch film</p></div></a></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/florence-0-ba267" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
389" playsinline="
390" muted="muted" 
391preload= "auto"
392loop="loop"
393width=100%
394src="https://stream.mux.com/tR00SisPjUqhLpTMKe96jW25FqLZIVlc1j5wCVZnkEl00/1080p.mp4"
395data-v-767e84ec="
396" autoplay="autoplay">
397</video></div><div class="thevideo w-embed"><video
398  webkit-playsinline
399  playsinline
400  muted
401  preload="none"
402  loop
403  width="100%"
404  style="opacity:0;transition:opacity .2s ease;"
405  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
406  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
407  src="https://stream.mux.com/tR00SisPjUqhLpTMKe96jW25FqLZIVlc1j5wCVZnkEl00/1080p.mp4"
408></video>
409</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee7eb916d3d07c9c7213_68470d33553c30c549ed9ccb_Hover-Video-Still.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">Florence</h2><p class="p1 grey new">Florence By Mills Coffee</p></div></a></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/alphatax" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
410" playsinline="
411" muted="muted" 
412preload= "auto"
413loop="loop"
414width=100%
415src="https://stream.mux.com/xOA23yv7OcA9y600dkHAt3ZFKlzw5027zZU3qsynlDlv00/1080p.mp4"
416data-v-767e84ec="
417" autoplay="autoplay">
418</video></div><div class="thevideo w-embed"><video
419  webkit-playsinline
420  playsinline
421  muted
422  preload="none"
423  loop
424  width="100%"
425  style="opacity:0;transition:opacity .2s ease;"
426  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
427  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
428  src="https://stream.mux.com/xOA23yv7OcA9y600dkHAt3ZFKlzw5027zZU3qsynlDlv00/1080p.mp4"
429></video>
430</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee8b66171126002e8f23_6a7d7adedd6547b8bb2d18d9_6a7c54ce5874469992689be4_Project-Hover-02.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">Alphatax</h2><p class="p1 grey new">One name for all things tax</p></div></a></div></div></div></div><div data-w-id="dc2ed9ba-4177-ec0e-7816-60d820f80b4b" class="text-div mar-top"><div class="landing_rich-text w-richtext"><p class="about-1-6-rem-middle-text projects">We’re an animation studio that partners with agencies and brands, to produce eye catching content that simplifies information, and engages the audience.</p></div></div><div class="w-dyn-list"><div role="list" class="project-card-grid w-dyn-items"><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/coke-christmas" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
431" playsinline="
432" muted="muted" 
433preload= "auto"
434loop="loop"
435width=100%
436src="https://stream.mux.com/aWB8RSUYNt02HNyqxVlMPYBbCFrcBZwVJrkyQ6rvhAdk/1080p.mp4"
437data-v-767e84ec="
438" autoplay="autoplay">
439</video></div><div class="thevideo w-embed"><video
440  webkit-playsinline
441  playsinline
442  muted
443  preload="none"
444  loop
445  width="100%"
446  style="opacity:0;transition:opacity .2s ease;"
447  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
448  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
449  src="https://stream.mux.com/aWB8RSUYNt02HNyqxVlMPYBbCFrcBZwVJrkyQ6rvhAdk/1080p.mp4"
450></video>
451</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee7520091783a73fdd3f_66caf929861574210fbc71a3_Hover-Loop_Still.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">Coca-Cola</h2><p class="p1 grey new">Christmas always finds a way</p></div></a></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/biscoff" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
452" playsinline="
453" muted="muted" 
454preload= "auto"
455loop="loop"
456width=100%
457src="https://stream.mux.com/NSU9AoRFUb4geKahB924mXAlupnR4ltVuDdw8yfZSuE/1080p.mp4"
458data-v-767e84ec="
459" autoplay="autoplay">
460</video></div><div class="thevideo w-embed"><video
461  webkit-playsinline
462  playsinline
463  muted
464  preload="none"
465  loop
466  width="100%"
467  style="opacity:0;transition:opacity .2s ease;"
468  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
469  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
470  src="https://stream.mux.com/NSU9AoRFUb4geKahB924mXAlupnR4ltVuDdw8yfZSuE/1080p.mp4"
471></video>
472</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee88dad36c529
472021ec2e_66d5fd6b46843e5f6e42a161_Hover_Still.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">Biscoff</h2><p class="p1 grey new">Revitalising a cult status cookie</p></div></a></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/nok" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
473" playsinline="
474" muted="muted" 
475preload= "auto"
476loop="loop"
477width=100%
478src="https://stream.mux.com/LU23WYr8UnzOFV1il8vxngUKLnZaqVcK9RgvnTyzw02E/1080p.mp4"
479data-v-767e84ec="
480" autoplay="autoplay">
481</video></div><div class="thevideo w-embed"><video
482  webkit-playsinline
483  playsinline
484  muted
485  preload="none"
486  loop
487  width="100%"
488  style="opacity:0;transition:opacity .2s ease;"
489  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
490  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
491  src="https://stream.mux.com/LU23WYr8UnzOFV1il8vxngUKLnZaqVcK9RgvnTyzw02E/1080p.mp4"
492></video>
493</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee7c0e286d7f91dc5f2f_66caf929861574210fbc71c9_Page_Hover_01.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">Lloyds Direct</h2><p class="p1 grey new">Explaining how to order medicine for others</p></div></a></div></div><div role="listitem" class="w-dyn-item"><div data-w-id="6f650618-6285-4988-da2e-37c3592fc461" class="project-wrapper"><a href="/ford-mustang" class="project-link-block new w-inline-block"><div class="video"><div class="video-hover new"><div class="thevideo-mobile w-embed"><video webkit-playsinline="
494" playsinline="
495" muted="muted" 
496preload= "auto"
497loop="loop"
498width=100%
499src="https://stream.mux.com/YG7vfAxULs1JMw5bEY54bqxgG3IVgSWwiA7Qjvw01GIg/1080p.mp4"
500data-v-767e84ec="
501" autoplay="autoplay">
502</video></div><div class="thevideo w-embed"><video
503  webkit-playsinline
504  playsinline
505  muted
506  preload="none"
507  loop
508  width="100%"
509  style="opacity:0;transition:opacity .2s ease;"
510  onmouseenter="this.style.opacity='1';this.play().catch(()=>{});"
511  onmouseleave="this.pause();this.currentTime=0;this.style.opacity='0';"
512  src="https://stream.mux.com/YG7vfAxULs1JMw5bEY54bqxgG3IVgSWwiA7Qjvw01GIg/1080p.mp4"
513></video>
514</div><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f91/6a82ee8a98f18414e7be6672_66caf929861574210fbc7148_FORD_MACH-E_Hover.jpeg" alt="" class="video-hover-img-projects"/></div></div><div class="media-copy new"><h2 class="h4">Ford</h2><p class="p1 grey new">Unveiling the Mustang Mach-E</p></div></a></div></div></div></div></div></div></div></div></div><main class="page-main"><div data-wf--cta-success-stories-new--variant="base" data-wf-component-id="1896955b-d704-a9ae-d67f-e1dade29911c" data-wf-variant-state="base" class="div-block-147 cta-section-white"><div class="padding-global"><div class="container-large"><div class="cta_content-wrap"><a data-wf-target="[[[&quot;1896955b-d704-a9ae-d67f-e1dade29911c&quot;,&quot;be983d4f-0c56-0668-037c-4ee60b49f7f0&quot;],[&quot;df63cec0-4848-7156-d540-09244ee8d36f&quot;]]]" data-w-id="be983d4f-0c56-0668-037c-4ee60b49f7f0" href="/contact" class="link-block-8 w-inline-block cta-link-white"><h2 class="h2">Let&#x27;s work together</h2><div data-w-id="1896955b-d704-a9ae-d67f-e1dade299121" class="arrow-link-mobile"><div class="arrow-lottie" data-w-id="0fe83528-5474-7759-47ac-3200f2916534" data-animation-type="lottie" data-src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/684adb10ec4803b6f7638f85_3fc872212d898643778d2da5cbd37382_cta-arrow_01.json" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="0" data-duration="3.1166666666666667" data-loading="eager"></div></div></a><div data-w-id="4f9c92fd-d4bc-8f45-0748-72035486c714" class="cta-link-mobile-black cta-link-mobile-white"><div class="cta-h2">
514Let’s work together </div><div class="_2nd-line"><a data-w-id="aa37fdbd-c516-716d-04c6-e0018795bf36" href="/contact" class="contact-us-button w-button">Contact us</a></div></div></div></div></div></div></main><div class="footer_wrapper less"><div class="cookies"><div id="consentPopup" fs-cc="banner" class="fs-cookie-popup"><div class="cookie-tag">Cookie settings</div><p id="w-node-_34a37cc9-37b3-ef6e-cdb5-0f4581564c04-81564c00" class="cookie-paragraph">We use cookies to improve your experience. You can opt out of certain cookies. Find out more in our <a href="/privacy-policy" target="_blank" class="fs-cc_link">privacy policy</a>.<br/></p><div id="w-node-_34a37cc9-37b3-ef6e-cdb5-0f4581564c0a-81564c00" class="button-wrapper w-clearfix"><a fs-cc="allow" href="#" class="button-3 accept w-button">Accept all cookies</a><a fs-cc="deny" id="w-node-_34a37cc9-37b3-ef6e-cdb5-0f4581564c0d-81564c00" href="#" class="button-3 deny w-button">Deny</a><a fs-cc="open-preferences" id="w-node-_34a37cc9-37b3-ef6e-cdb5-0f4581564c0f-81564c00" href="#" class="preferences-link">Manage settings</a></div></div><div fs-cc="preferences" class="fs-preferences-manager-wrapper"><div class="preferences-container"><div class="privacy-title">Preferences</div><p class="paragraph">Privacy is important to us, so you have the option of disabling certain types of storage that may not be necessary for the basic functioning of the website. Blocking categories may impact your experience on the website. <br/></p><a fs-cc="allow" href="#" class="button-3 w-button">Accept all cookies</a><a fs-cc="close" href="#" class="close-button w-inline-block"><img loading="lazy" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/67c9308a515511c0a8d8b04b_np_close_25798_27313D.svg" alt="" class="image"/></a><div class="consents-form w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" class="w-clearfix" data-wf-page-id="66caf929861574210fbc6fcd" data-wf-element-id="34a37cc9-37b3-ef6e-cdb5-0f4581564c1f" data-turnstile-sitekey="0x4AAAAAAAQTptj2So4dx43e"><div class="grid"><div class="text-div-2"><label for="name" class="cookie-tag">Essential</label><p class="paragraph">These items are required to enable basic website functionality.<br/></p></div><p id="w-node-_34a37cc9-37b3-ef6e-cdb5-0f4581564c27-81564c00" class="paragraph bold">Always active<br/></p></div><div class="grid"><div class="text-div-2"><label for="name" class="cookie-tag">Marketing</label><p class="paragraph">These items are used to deliver advertising that is more relevant to you and your interests. <br/></p></div><label id="w-node-_34a37cc9-37b3-ef6e-cdb5-0f4581564c31-81564c00" class="w-checkbox"><div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox"></div><input type="checkbox" name="checkbox-4" id="checkbox-4" data-name="Checkbox 4" fs-cc-checkbox="marketing" style="opacity:0;position:absolute;z-index:-1"/><span class="checkbox-label w-form-label" for="checkbox-4"></span></label></div><div class="grid"><div class="text-div-2"><label for="name" class="cookie-tag">Personalization</label><p class="paragraph">These items allow the website to remember choices you make (such as your user name, language, or the region you are in) and provide enhanced, more personal features. <br/></p></div><label id="w-node-_34a37cc9-37b3-ef6e-cdb5-0f4581564c3b-81564c00" class="w-checkbox"><div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox"></div><input type="checkbox" name="checkbox-3" id="checkbox-3" data-name="Checkbox 3" fs-cc-checkbox="personalization" style="opacity:0;position:absolute;z-index:-1"/><span class="checkbox-label w-form-label" for="checkbox-3"></span></label></div><div fs-cc-checkbox="analytics" class="grid"><div class="text-div-2"><label for="name" class="cookie-tag">Analytics</label><p class="paragraph">These items help the website operator understand how its website performs, how visitors interact with the site, and whether there may be technical issues. <br/></p></div><label id="w-node-_34a37cc9-37b3-ef6e-cdb5-0f4581564c45-81564c00" class="w-checkbox"><div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox"></div><input type="checkbox" name="checkbox-3" id="checkbox-3" data-name="Checkbox 3" fs-cc-checkbox="analytics" style="opacity:0;position:absolute;z-index:-1"/>
514<span class="checkbox-label w-form-label" for="checkbox-3"></span></label></div><input type="submit" data-wait="Please wait..." fs-cc="deny" class="button-3 deny w-button" value="Reject all cookies"/><input type="submit" data-wait="Please wait..." fs-cc="submit" class="button-3 field-wrapper w-button" value="Confirm my choices"/></form><div class="w-form-done"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div></div><div fs-cc="manager" class="fs-manager-opener"><img fs-cc="open-preferences" loading="lazy" alt="" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/67c9308a515511c0a8d8b04a_np_cookie_80793_FFFFFF.svg"/></div></div><div data-w-id="e825a45a-943c-27ce-6cd2-6c94cb5ac036" class="footer-copy no"><div class="spacer"></div><footer class="footer white"><div class="container-13 is-footer"><div class="footer_top"></div><div class="padding-global is-footer"><div class="container-large is-footer"><div class="w-layout-grid footer-grid"><div class="footer-div hide-logo-mobile"><a href="/old-home" class="footer-logo-link w-inline-block"><img width="37" loading="lazy" alt="OK Logo " src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/66caf929861574210fbc7018_OK_Logo_Green.svg" class="footer-logo _0-op"/><div class="lottie-animation" data-w-id="1d43bdf6-5fa9-f8be-597c-a401452e0253" data-animation-type="lottie" data-src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/66d55f70cd425b52968354b9_Logo_Fotter_Lottie_01_Green.json" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="3" data-duration="0" data-loading="eager"></div></a></div><div data-w-id="1d43bdf6-5fa9-f8be-597c-a401452e0254" class="footer-div"><div class="footer-title space">Contact</div><div><div class="footer-text"><div class="footer-text-address">4th Floor,<br/>Silverstream House,<br/>45 Fitzroy Street,<br/>London,<br/>W1T 6EB</div><a href="tel:+44208058947" class="line_link is-footer w-inline-block"><div class="footer-link-text is-2">+44 (0)20 8058 9479</div></a><a href="mailto:[email protected]" r-copy-to-clipboard="[email protected]" class="line_link is-footer copy-button w-inline-block"><div class="footer-link-text is-2">[email protected]</div></a></div></div></div><div data-w-id="1d43bdf6-5fa9-f8be-597c-a401452e0267" class="footer-div hide-mobile"><a data-w-id="1d43bdf6-5fa9-f8be-597c-a401452e0268" href="#" class="footer-link-mobile w-inline-block"><div class="footer-text-heading"><div class="footer-title">Info</div><img width="15" loading="lazy" alt="Side Arrow SVG" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/66caf929861574210fbc7016_Arrow-Corner-Green.svg" class="footer-arrow"/></div><div class="green-line"></div></a><div class="footer-text"><a href="/" class="line_link is-footer w-inline-block"><div class="footer-link-text is-2">Home</div><div class="underline-2 _2 is-footer"></div></a><a href="/projects" aria-current="page" class="line_link is-footer w-inline-block w--current"><div class="footer-link-text is-2">Projects</div><div class="underline-2 _2 is-footer"></div></a><a href="/insight" class="line_link is-footer w-inline-block"><div class="footer-link-text is-2">Insight</div><div class="underline-2 _2 is-footer"></div></a><a href="/about" class="line_link is-footer w-inline-block"><div class="footer-link-text is-2">About</div><div class="underline-2 _2 is-footer"></div></a><a href="/contact" class="line_link is-footer w-inline-block"><div class="footer-link-text is-2">Contact</div><div class="underline-2 _2 is-footer"></div></a><a href="/london-motion-graphics" class="footer-link-text hide">London Motion Graphics </a></div></div><div data-w-id="1d43bdf6-5fa9-f8be-597c-a401452e0297" class="footer-div hide-mobile"><a href="#" class="footer-link-mobile w-inline-block"><div class="footer-text-heading"><div class="footer-title">Follow us</div><img width="15" loading="lazy" alt="Side Arrow SVG" src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/66caf929861574210fbc7016_Arrow-Corner-Green.svg" class="footer-arrow"/></div><div class="green-line"></div></a><div class="footer-text"><a href="https://www.instagram.com/oksocial_/" class="line_link is-footer w-inline-block"><div class="footer-link-text is-2">Instagram</div><div class="underline-2 _2 is-footer"></div></a><a href="https://www.youtube.com/@oksocial" class="line_link is-footer w-inline-block"><div class="footer-link-text is-2">YouTube</div><div class="underline-2 _2 is-footer"></div></a><a href="https://www.linkedin.com/company/ok-social" class="line_link is-footer w-inline-block"><div class="footer-link-text is-2">LinkedIn</div><div class="underline-2 _2 is-footer"></div></a></div></div><div data-w-id="1d43bdf6-5fa9-f8be-597c-a401452e02ab" class="footer-div"><div class="footer-title space">Newsletter</div><div class="footer-text-box">Subscribe for the latest<br/>OK Social news &amp; case studies</div><div class="form-block w-form"><form id="Newsletter" name="wf-form-Newsletter" data-name="Newsletter" method="get" data-wf-page-id="66caf929861574210fbc6fcd" data-wf-element-id="1d43bdf6-5fa9-f8be-597c-a401452e02b3" data-turnstile-sitekey="0x4AAAAAAAQTptj2So4dx43e"><input class="newsletter-email w-input" maxlength="256" name="email-2" data-name="Email 2" placeholder="Type email address" type="email" id="email-2" required=""/><input type="submit" data-wait="Please wait..." class="submit-button-7-copy w-button" value="Submit"/></form><div class="success-message-2 w-form-done"><div class="text-block-5">Your submission has been received!</div></div><div class="error-message-2 w-form-fail"><div class="text-block-6">Oops! Something went wrong.</div></div></div></div></div><div data-w-id="e1a54b59-03cc-90c5-4cb5-88b77fb9b1d7" class="copyright-wrapper"><p class="footer-t-cs-copy">OK Social Productions Ltd Copyright ©2026 Registered </p><p class="footer-t-cs-copy is-bottom-text"> in England &amp; Wales Company No.11846123  <a href="/privacy-policy" class="footer-t-cs-copy is-bottom-text">Privacy Policy</a></p></div></div></div></div></footer></div></div></div>
514<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=66caf929861574210fbc6f4d" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
514<script src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/js/webflow.schunk.f2efb3c5440a81cf.js" type="text/javascript" integrity="sha384-VK02VJvMib7ytrF5M2joPWNtDQs366FZgEQ5B+Iwnjx0WBnwQXfootyziSYxdrmS" crossorigin="anonymous"></script>
514<script src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/js/webflow.schunk.b7b72544d8957638.js" type="text/javascript" integrity="sha384-tWpxFzH2DN14o9RY6aovn4liKTzcYNGediOpB5lrtyTXyDPZG0qTmmvRJS8zxS4L" crossorigin="anonymous"></script>
514<script src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/js/webflow.schunk.987e8cbac2e77ac4.js" type="text/javascript" integrity="sha384-/2XOOAJ8k8EAQQNAxXa9tl1iD5W/9qXrx8b+1dmNd1zPgtCa3F1Z69cAi39p0+45" crossorigin="anonymous"></script>
514<script src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d/js/webflow.6ed3d4ed.21144b06a57a5fa9.js" type="text/javascript" integrity="sha384-iSzF2ImtOAREBNaYtmUBu/7ivaRU5NSYOE8u1FXAufXH1TYQQx8dGgklSo0nJG/w" crossorigin="anonymous"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/gsap.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollToPlugin.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/Flip.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollTrigger.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/SplitText.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/CustomEase.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/CustomWiggle.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/CustomBounce.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/EasePack.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/TextPlugin.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollSmoother.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/Physics2DPlugin.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/PhysicsPropsPlugin.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrambleTextPlugin.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/Observer.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/MotionPathPlugin.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/MotionPathHelper.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/Draggable.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/DrawSVGPlugin.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/InertiaPlugin.min.js" type="text/javascript"></script>
514<script src="https://cdn.prod.website-files.com/gsap/3.15.0/MorphSVGPlugin.min.js" type="text/javascript"></script>
514<script type="text/javascript">gsap.registerPlugin(ScrollToPlugin,Flip,ScrollTrigger,SplitText,CustomEase,CustomWiggle,CustomBounce,EasePack,TextPlugin,ScrollSmoother,Physics2DPlugin,PhysicsPropsPlugin,ScrambleTextPlugin,Observer,MotionPathPlugin,MotionPathHelper,Draggable,DrawSVGPlugin,InertiaPlugin,MorphSVGPlugin);</script>
514<script>
515
516// © Code by T.RICKS, https://www.tricksdesign.com/
517// You have the license to use this code in your projects but not redistribute it to others
518
519// Works on internal links, ignores external links or links containing #
520function internalLink(myLink) {
521    return (myLink.host == window.location.host);
522}
523$('a').each(function() {
524  if (internalLink(this) && (this).href.indexOf('#') === -1) {
525  $(this).click(function(e){
526  e.preventDefault();
527  var moduleURL = jQuery(this).attr("href");
528  setTimeout( function() { window.location = moduleURL }, 700 );
529  // Class that has page out interaction tied to click
530  $('.page-transition').click();
531});
532    }
533});
534
535</script>
535
536
537<script 
538type="application/ld+json">
539{
540"@context":"https://schema.org",
541"@type":"Organization",
542"name":"OK Social",
543"url":"https://www.oksocial.co.uk/",
544"logo":"https://cdn.prod.website-files.com/5e2987d164852b030fdb60a8/5f69dad6252850d0806eaa55_OK-Social-Logo.svg",
545"contactPoint":{"@type":
546"ContactPoint","telephone":"+44 204 358 0022",
547"email":"[email protected]",
548"contactType":"customer service","areaServed":"GB",
549"availableLanguage":"en"},
550"sameAs":[
551"https://vimeo.com/oksocial",
552"https://twitter.com/oksocial_",
553"https://www.instagram.com/oksocial_",
554"https://www.linkedin.com/company/ok-social",
555"https://www.youtube.com/@oksocial"
556]}
557</script>
557
558
559<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
559
560
561
562<script>
563var cookieName = 'cookieClosed';
564
565if(typeof Cookies.get(cookieName) !== 'undefined') {
566$('.cookie-modal').remove();
567}
568
569$('.close-btn').on('click', function(){
570Cookies.set(cookieName, 'ok', { expires: 14 });
571})
572</script>
572
573<!-- custom html code Removed from here -->
574
575  
575<script>
576    // Function to wrap words and letters inside the "tricks" class
577    function wrapText() {
578      const tricksElements = document.getElementsByClassName("tricks");
579
580      // Wrap each word with tricksword and each letter with letter spans
581      Array.from(tricksElements).forEach(wordWrap => {
582        wordWrap.innerHTML = wordWrap.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="tricksword">$2</span>');
583      });
584
585      const tricksWords = document.getElementsByClassName("tricksword");
586      Array.from(tricksWords).forEach(letterWrap => {
587        letterWrap.innerHTML = letterWrap.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
588      });
589    }
590
591    // Call the function to wrap letters and words
592    wrapText();
593
594    // Intersection Observer to track fade-up elements
595    const observerOptions = {
596      root: null, // The viewport
597      threshold: 0.1 // Trigger when 10% of the element is visible
598    };
599
600    const observerCallback = (entries, observer) => {
601      entries.forEach(entry => {
602        if (entry.isIntersecting) {
603          const target = entry.target;
604
605          // Add the 'active' class to trigger fade-up transition
606          target.classList.add('active');
607
608          // Trigger animation with Anime.js for the letters
609          anime.timeline({ loop: false })
610            .add({
611              targets: target.querySelectorAll('.letter'),
612              translateY: [100, 0], // Animate from below
613              opacity: [0, 1],
614              easing: "easeOutExpo",
615              duration: 1400,
616              delay: (el, i) => 300 + 15 * i
617            });
618
619          // Stop observing once animated
620          observer.unobserve(target);
621        }
622      });
623    };
624
625    // Set up the Intersection Observer
626    const observer = new IntersectionObserver(observerCallback, observerOptions);
627
628    // Attach the observer to each fade-up element
629    document.querySelectorAll('.fade-up').forEach(element => {
630      observer.observe(element);
631    });
632  </script>
632
633
634<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.min.js"></script>
634 
635<script>
636let lenis = new Lenis({
637  lerp: 0.1,
638  wheelMultiplier: 0.87,
639  gestureOrientation: "vertical",
640  normalizeWheel: false,
641  smoothTouch: false,
642});
643function raf(time) {
644  lenis.raf(time);
645  requestAnimationFrame(raf);
646}
647requestAnimationFrame(raf);
648$("[data-lenis-start]").on("click", function () {
649  lenis.start();
650});
651$("[data-lenis-stop]").on("click", function () {
652  lenis.stop();
653});
654$("[data-lenis-toggle]").on("click", function () {
655  $(this).toggleClass("stop-scroll");
656  if ($(this).hasClass("stop-scroll")) {
657    lenis.stop();
658  } else {
659    lenis.start();
660  }
661});
662</script>
662
663
664
665<script src="https://tools.refokus.com/copy-to-clipboard/bundle.v1.0.0.js"></script>
665
666
667<!-- Start of HubSpot Embed Code -->
668<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/147396953.js"></script>
668
669<!-- End of HubSpot Embed Code -->
669<script>
670// Function to show the pop-up
671function showPopup(button, message) {
672  // Create the pop-up element
673  const popup = document.createElement('div');
674  popup.textContent = message;
675  popup.style.position = 'absolute';
676  popup.style.backgroundColor = '#333';
677  popup.style.color = '#fff';
678  popup.style.padding = '8px 12px';
679  popup.style.borderRadius = '5px';
680  popup.style.fontSize = '14px';
681  popup.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
682  popup.style.zIndex = '1000';
683  popup.style.opacity = '0';
684  popup.style.transition = 'opacity 0.3s ease';
685
686  // Get button's position and calculate popup position
687  const rect = button.getBoundingClientRect();
688  popup.style.top = `${rect.top + window.scrollY - 40}px`; // 40px above the button
689  popup.style.left = `${rect.left + window.scrollX + rect.width / 2 - 50}px`; // Centered horizontally
690
691  // Add the pop-up to the body
692  document.body.appendChild(popup);
693
694  // Fade in the pop-up
695  requestAnimationFrame(() => {
696    popup.style.opacity = '1';
697  });
698
699  // Remove the pop-up after 2 seconds
700  setTimeout(() => {
701    popup.style.opacity = '0';
702    popup.addEventListener('transitionend', () => {
703      popup.remove();
704    }, { once: true });
705  }, 2000);
706}
707
708// Attach the function to the "copy-button"
709document.querySelectorAll(".copy-button").forEach((button) => {
710  button.addEventListener("click", function () {
711    // Call the showPopup function and display the message
712    showPopup(this, "Email copied!");
713  });
714});
715</script>
715<script src="https://cdn.prod.website-files.com/66caf929861574210fbc6f4d%2F64af5466064f85b20dfe41d5%2F6aabc6648bfd0241ec63d498%2Fsuperflowtestscript3-1.0.0-stLtHsuWIYoERke3m9Tx-1754451660300607.js" type="text/javascript" data-sf-platform="webflow-auto" data-superflow-script-loaded-by="webflow" data-superflow-api-key="stLtHsuWIYoERke3m9Tx" data-superflow-project-id="1754451660300607"></script>
715</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.