A creative marketing agency.
CLICK TO ENTER
`;
});
searchResultsEl.innerHTML = html.join('');
searchResultsEl.querySelectorAll('[data-has-marquee]').forEach(el => {
if (el.firstElementChild.offsetWidth
` : '';
const awardLogo2 = data.awardLogo2 ? `` : '';
const awardLogoDiv = data.awardLogo1 && data.awardLogo2 ? `` : '';
const mediaEl = document.createElement('div');
mediaEl.classList.add('p-home__infinity__cell__media');
mediaEl.classList.add('v--award');
mediaEl.innerHTML = `
`;
const bgImage = window.innerWidth ' + data.ip + '' : ''}
${data.name}
${data.client}
`;
blockEl.dataset.pageTransition = 'red';
blockEl.dataset.pageTransitionDirection = 'vertical';
const gEl = document.createElement('div');
gEl.classList.add('p-home__infinity__g__el');
gEl.classList.add(`v${i}`);
gEl.dataset.startAnim = `${i%12}`;
gEl.dataset.type = 'cs';
gEl.appendChild(blockEl);
gEl.appendChild(mediaEl);
gEl.appendChild(createAnimBubbleEls());
return gEl;
}
function createGridCel(data, i) {
const imgEl = document.createElement('img');
imgEl.src = data.image;
const mediaEl = document.createElement('div');
mediaEl.classList.add('p-home__infinity__cell__media');
mediaEl.appendChild(imgEl);
const bgImage = window.innerWidth ' + data.ip + '' : ''}
${data.name}
${data.client}
`;
blockEl.dataset.pageTransition = 'red';
blockEl.dataset.pageTransitionDirection = 'vertical';
const gEl = document.createElement('div');
gEl.classList.add('p-home__infinity__g__el');
gEl.classList.add(`v${i}`);
gEl.dataset.startAnim = `${i%12}`;
gEl.dataset.type = 'cs';
gEl.appendChild(blockEl);
gEl.appendChild(mediaEl);
gEl.appendChild(createAnimBubbleEls());
return gEl;
}
function createGridPow(data, i) {
const blockEl = document.createElement('a');
blockEl.classList.add('p-home__infinity__pow');
blockEl.dataset.val = data.slug;
blockEl.href = data.link;
blockEl.target = '_blank';
blockEl.innerHTML = `
${data.text}
DOWNLOAD
`;
const gEl = document.createElement('div');
gEl.classList.add('p-home__infinity__g__el');
gEl.classList.add(`v${i}`);
gEl.dataset.type = 'pow';
gEl.append(blockEl);
return gEl;
}
function createGridTestimonial(data, i) {
const blockEl = document.createElement('div');
blockEl.classList.add('p-home__infinity__testimonial');
const headingEl = data.text.length “
${data.text}${headingEl}>${data.line}
`; // ”
if (data.externalLink) {
blockEl.dataset.link = data.externalLink;
blockEl.dataset.linkExternal = 'true';
} else if (data.cs && data.cs.length > 1) {
blockEl.dataset.link = `${window.location.origin}/case-study/${data.cs}`;
blockEl.dataset.pageTransition = 'red';
blockEl.dataset.pageTransitionDirection = 'vertical';
}
const gEl = document.createElement('div');
gEl.classList.add('p-home__infinity__g__el');
gEl.classList.add(`v${i}`);
gEl.dataset.startAnim = `${i%12}`;
gEl.dataset.type = 'testimonial';
gEl.appendChild(blockEl);
gEl.appendChild(createAnimBubbleEls());
return gEl;
}
function removeOldActives() {
const oldActive = document.querySelectorAll('.p-home__infinity__g__el.active')
oldActive.forEach(active => active.classList.remove('active'));
return oldActive;
}
function cellClickMedia(e, el) {
e.stopPropagation();
const timeDiff = e.timeStamp - window.clickTime;
if (timeDiff > 100) return;
el.parentElement.querySelector('[data-link]').click();
}
function gridFunc() {
if (window.updatePosF) window.cancelAnimationFrame(window.updatePosF);
const container = window.infinityGrid;
const cellSize = cSize;
const cellHeight = cSize;
const cols = 2;
const rows = 2;
const cells = [];
container.innerHTML = '';
if (window.innerWidth c.showOnHomePage === true) : window.csList.filter(c => c.showOnHomePage === true);
const tList = shuffle(window.testimonialList);
const pList = shuffle(window.powList);
const csList = shuffle(list.filter(item => item.isAward === false));
const awardsList = shuffle(list.filter(item => item.isAward === true));
const cell = createGridEl();
cell.id = `cell-${i}`;
for (let j = 0; j {
window.mountBubblesAnim();
pageTransitionEvents();
externalLinkEl();
Splitting();
}, 20);
}
function externalLinkEl() {
document.querySelectorAll('[data-link-external]:not([data-link-external-added])').forEach(btn => {
btn.dataset.linkExternalAdded = 't';
if (btn.dataset.link) {
btn.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
window.open(btn.dataset.link, '_blank');
});
} else {
console.error('Button without data-link: ', btn);
}
});
}
function updatePosition(continueUpdate = true) {
const targetX = isMobile ? gridConfig.target.x : gridConfig.target.x - gridConfig.cursor.x;
const targetY = isMobile ? gridConfig.target.y : gridConfig.target.y - gridConfig.cursor.y;
gridConfig.current = {
x: lerp(gridConfig.current.x, targetX, gridConfig.ease),
y: lerp(gridConfig.current.y, targetY, gridConfig.ease)
}
cells.forEach((cell, index) => {
const col = index % cols;
const row = Math.floor(index / cols);
let x = ((col * cellSize + gridConfig.current.x) % (cols * cellSize));
let y = ((row * cellHeight + gridConfig.current.y) % (rows * cellHeight));
if (x (cols - 1) * cellSize) x -= cols * cellSize;
if (y (rows - 1) * cellHeight) y -= rows * cellHeight;
cell.style.transform = `translate(${x.toFixed(2)}px, ${y.toFixed(2)}px)`;
});
// if (document.body.dataset.loader === 'end') continueUpdate = true;
if (!continueUpdate) return;
if (window.updatePosF) window.cancelAnimationFrame(window.updatePosF);
window.updatePosF = requestAnimationFrame(updatePosition);
}
document.addEventListener("visibilitychange", () => {
onMouseUp();
if (!document.hidden) {
updatePosition();
} else {
window.cancelAnimationFrame(window.updatePosF);
}
});
window.initGridUpdate = function() {
updatePosition();
}
function onMouseDown(e) {
if (window.mouseLock) return;
mouseIsDown = true;
window.mouseDownTimeout = setTimeout(onMouseUp, 8000);
gridConfig.position = {
x: gridConfig.current.x,
y: gridConfig.current.y
};
gridConfig.startX = e.touches ? e.touches[0].clientX : e.clientX;
gridConfig.startY = e.touches ? e.touches[0].clientY : e.clientY;
document.body.dataset.mouseDown = 'true';
}
function onMouseMove(e) {
if (window.mouseLock) return;
const x = e.touches ? e.touches[0].clientX : e.clientX;
const y = e.touches ? e.touches[0].clientY : e.clientY;
if (!isMobile) {
gridConfig.cursor = {
x: (x - (window.innerWidth / 2)) / 5,
y: (y - (window.innerHeight / 2)) / 5,
}
}
if (!mouseIsDown) return
const distanceX = (gridConfig.startX - x) * gridConfig.scale;
const distanceY = (gridConfig.startY - y) * gridConfig.scale;
gridConfig.target = {
x: nf(gridConfig.position.x - distanceX),
y: nf(gridConfig.position.y - distanceY)
}
}
function onMouseUp() {
window.mouseIsDown = false;
document.body.dataset.mouseDown = '';
clearTimeout(window.mouseDownTimeout);
}
function addMouseMoveEvent() {
document.querySelectorAll('.p-home__infinity__cell__media').forEach(el => {
el.onclick = function(e) {
cellClickMedia(e, el);
};
el.onmousedown = (e) => {
window.clickTime = e.timeStamp
};
});
}
function addReelEvent() {
const reelVideoEl = document.getElementById('reel-video');
document.querySelectorAll('.p-home__infinity__reel').forEach(reelEl => {
reelEl.querySelectorAll('.p-home__infinity__reel__btn').forEach(btn => {
reelEl.addEventListener('click', () => {
window.mouseLock = true;
reelEl.classList.add('active');
document.body.dataset.reel = 't';
const b = reelEl.getBoundingClientRect();
gridConfig.cursor = {
x: 0,
y: 0
}
gridConfig.target = {
x: gridConfig.position.x - b.x,
y: gridConfig.position.y - b.y
}
window.setTimeout(() => {
reelVideoEl.classList.remove('h');
window.vimeoPlayer.play();
}, 500);
});
});
});
const closeBtn = document.getElementById('reel-video__close-btn');
closeBtn.addEventListener('click', () => {
reelVideoEl.classList.add('h');
document.body.dataset.reel = '';
window.vimeoPlayer.pause();
window.setTimeout(() => {
const reelElActive = document.querySelector('.p-home__infinity__reel.active');
if (reelElActive) reelElActive.classList.remove('active');
window.setTimeout(() => {
window.mouseLock = false;
window.vimeoPlayer.setCurrentTime(0);
}, 400);
}, 200);
});
}
createGrid();
if (document.body.dataset.gridEvents !== 't') {
document.body.dataset.gridEvents = 't';
if (window.innerWidth > 991) {
container.addEventListener('wheel', e => {
if (window.mouseLock) return;
e.stopPropagation();
e.preventDefault();
gridConfig.target = {
x: nf(gridConfig.target.x - e.deltaX),
y: nf(gridConfig.target.y - e.deltaY)
}
});
}
container.addEventListener('mousedown', onMouseDown);
container.addEventListener('mousemove', onMouseMove);
container.addEventListener('mouseup', onMouseUp);
container.addEventListener('touchstart', onMouseDown);
container.addEventListener('touchmove', onMouseMove);
container.addEventListener('touchend', onMouseUp);
document.addEventListener('mouseleave', e => {
if (e.clientY = window.innerWidth || e.clientY >= window.innerHeight)) {
window.mouseIsDown = false;
document.body.dataset.mouseDown = '';
}
});
addMouseMoveEvent();
addReelEvent();
}
container.classList.remove('updating');
}
window.addEventListener('resize', gridFunc);
.svg)
.svg)
.png)
