Canvas image displacement - portfolio slider

canvas-image-displacement-portfolio-slider.markdown

Canvas image displacement - portfolio slider

Slider works with your keyboard's arrow keys too!

A Pen by Dan on CodePen.

License.

index.html

<section>
	<div class="project-slider">
		<div class="project-slide">
			<div class="project-slide__inner">
				<div class="project-slide__title project-slide__title--top-left">
					<h4>Glitch</h4>
				</div>
				<div class="project-slide__image">
					<div class="displacement-hover" data-displacement="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/displacement.png" data-speediut="1.2" data-speedout="0.9" data-intensity="0.2">
						<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/flickity-image-1.png" alt="" />
						<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/flickity-image-1-hover.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="project-slide">
			<div class="project-slide__inner">
				<div class="project-slide__title project-slide__title--top-left">
					<h4>Music</h4>
				</div>
				<div class="project-slide__image">
					<div class="displacement-hover" data-displacement="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/displacement.png" data-speediut="1.2" data-speedout="0.9" data-intensity="0.2">
						<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/flickity-image-3.png" alt="" />
						<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/flickity-image-3-hover.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="project-slide">
			<div class="project-slide__inner">
				<div class="project-slide__title project-slide__title--top-left">
					<h4>Vaporwave</h4>
				</div>
				<div class="project-slide__image">
					<div class="displacement-hover" data-displacement="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/displacement.png" data-speediut="1.2" data-speedout="0.9" data-intensity="0.2">
						<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/flickity-image-2.png" alt="" />
						<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/flickity-image-2-hover.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="project-slide">
			<div class="project-slide__inner">
				<div class="project-slide__title project-slide__title--top-left">
					<h4>Gaming</h4>
				</div>
				<div class="project-slide__image">
					<div class="displacement-hover" data-displacement="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/displacement.png" data-speediut="1.2" data-speedout="0.9" data-intensity="0.2">
						<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/flickity-image-4.png" alt="" />
						<img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/flickity-image-4-hover.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div class="cursor">
	<div class="cursor__core"></div>
	<div class="cursor__ring"></div>
	<div class="cursor__arrows">
		<svg class="cursor__arrow cursor__arrow--left" width="6" height="9"><path d="M2.828427 4.242641l2.82842712 2.82842712L4.24264056 8.4852817 1.41421344 5.65685456-1.3e-7 4.242641 4.24264057 3.1e-7l1.41421355 1.41421357L2.828427 4.242641z" fill="#FFF" fill-rule="nonzero"/></svg>
		<svg class="cursor__arrow cursor__arrow--right" width="7" height="9"><path d="M3.656855 4.242641L.82842786 7.07106811l1.41421356 1.41421356 2.82842713-2.82842712 1.41421356-1.41421357L2.24264143 3.1e-7.82842787 1.41421387l2.82842712 2.82842712z" fill="#FFF" fill-rule="nonzero"/></svg>
	</div>
	<div class="cursor__icon">
		<div class="cursor__eye">
			<svg viewBox="0 0 488.85 488.85" width="512" height="512"><path d="M244.425 98.725c-93.4 0-178.1 51.1-240.6 134.1-5.1 6.8-5.1 16.3 0 23.1 62.5 83.1 147.2 134.2 240.6 134.2s178.1-51.1 240.6-134.1c5.1-6.8 5.1-16.3 0-23.1-62.5-83.1-147.2-134.2-240.6-134.2zm6.7 248.3c-62 3.9-113.2-47.2-109.3-109.3 3.2-51.2 44.7-92.7 95.9-95.9 62-3.9 113.2 47.2 109.3 109.3-3.3 51.1-44.8 92.6-95.9 95.9zm-3.1-47.4c-33.4 2.1-61-25.4-58.8-58.8 1.7-27.6 24.1-49.9 51.7-51.7 33.4-2.1 61 25.4 58.8 58.8-1.8 27.7-24.2 50-51.7 51.7z" fill="#000"/></svg>
		</div>
		<div class="cursor__mail">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g fill="#FFF"><path d="M7 9L5.268 7.484.316 11.729c.18.167.423.271.691.271h11.986c.267 0 .509-.104.688-.271L8.732 7.484 7 9z"/><path d="M13.684 2.271A1.007 1.007 0 0 0 12.993 2H1.007c-.267 0-.509.104-.689.273L7 8l6.684-5.729zM0 2.878v8.308l4.833-4.107zM9.167 7.079L14 11.186V2.875z"/></g></svg>
		</div>
	</div>
</div>

<div class="parallax-element">
	<h1>Portfolio</h1>
</div>

script.js

/* Detect Mobile
// ================================ */
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)

/* Cursor Follow
// ================================ */
if (!isMobile) {
	var cursorFollow = {
		config: {
			cursorMain: document.querySelector('.cursor'),
			cursorCore: document.querySelector('.cursor__core'),
			cursorRing: document.querySelector('.cursor__ring'),
			cursorArrows: document.querySelector('.cursor__arrows'),
			cursorEye: document.querySelector('.cursor__eye'),
			cursorEmail: document.querySelector('.cursor__mail'),
			cursorTextPath: document.querySelector('.cursor__text'),
			parallaxElement: document.querySelector('.parallax-element')
		},
		initCursor: () => {
			document.addEventListener("mousemove", e => {
				// add listener to track the current mouse position
				let clientX = e.clientX,
						clientY = e.clientY;

				// background movement
				let bgX = Math.max(-100, Math.min(100, document.querySelector('body').clientWidth / 2 - clientX)),
						bgY = Math.max(-100, Math.min(100, window.document.querySelector('body').clientHeight / 2 - clientY));
				TweenMax.to(cursorFollow.config.parallaxElement, 3, {
					autoAlpha: 1,
					x: bgX,
					y: bgY,
					ease: Power1.easeOut
				})

				// transform the innerCursor to the current mouse position
				// use requestAnimationFrame() for smooth performance
				const render = () => {
					//innerCursor.style.transform = `translate(${clientX}px, ${clientY}px)`;
					// if you are already using TweenMax in your project, you might as well
					// use TweenMax.set() instead
					TweenMax.set(cursorFollow.config.cursorMain, {
						x: clientX,
						y: clientY
					});
				};
				requestAnimationFrame(render);
			});
		}
	}
	cursorFollow.initCursor();
}

/* Image Canvas
// ================================ */
var hoverEffect = function(opts) {
	var vertex = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`;

	var fragment = `
varying vec2 vUv;

uniform sampler2D texture;
uniform sampler2D texture2;
uniform sampler2D disp;

// uniform float time;
// uniform float _rot;
uniform float dispFactor;
uniform float effectFactor;

// vec2 rotate(vec2 v, float a) {
//  float s = sin(a);
//  float c = cos(a);
//  mat2 m = mat2(c, -s, s, c);
//  return m * v;
// }

void main() {

vec2 uv = vUv;

// uv -= 0.5;
// vec2 rotUV = rotate(uv, _rot);
// uv += 0.5;

vec4 disp = texture2D(disp, uv);

vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);

vec4 _texture = texture2D(texture, distortedPosition);
vec4 _texture2 = texture2D(texture2, distortedPosition2);

vec4 finalTexture = mix(_texture, _texture2, dispFactor);

gl_FragColor = finalTexture;
// gl_FragColor = disp;
}
`;

	var parent = opts.parent || console.warn("no parent");
	var dispImage = opts.displacementImage || console.warn("displacement image missing");
	var image1 = opts.image1 || console.warn("first image missing");
	var image2 = opts.image2 || console.warn("second image missing");
	var intensity = opts.intensity || 1;
	var speedIn = opts.speedIn || 1.6;
	var speedOut = opts.speedOut || 1.2;
	var userHover = (opts.hover === undefined) ? true : opts.hover;
	var easing = opts.easing || Expo.easeOut;

	var mobileAndTabletcheck = function() {
		var check = false;
		(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
		return check;
	};

	var scene = new THREE.Scene();
	var camera = new THREE.OrthographicCamera(
		parent.offsetWidth / -2,
		parent.offsetWidth / 2,
		parent.offsetHeight / 2,
		parent.offsetHeight / -2,
		1,
		1000
	);

	camera.position.z = 1;

	var renderer = new THREE.WebGLRenderer({
		antialias: false,
		alpha: false
	});

	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setClearColor(0xffffff, 0.0);
	renderer.setSize(parent.offsetWidth, parent.offsetHeight);
	parent.appendChild(renderer.domElement);

	var loader = new THREE.TextureLoader();
	loader.crossOrigin = "";
	var texture1 = loader.load(image1);
	var texture2 = loader.load(image2);

	var disp = loader.load(dispImage);
	disp.wrapS = disp.wrapT = THREE.RepeatWrapping;

	texture1.magFilter = texture2.magFilter = THREE.LinearFilter;
	texture1.minFilter = texture2.minFilter = THREE.LinearFilter;

	texture1.anisotropy = renderer.getMaxAnisotropy();
	texture2.anisotropy = renderer.getMaxAnisotropy();

	var mat = new THREE.ShaderMaterial({
		uniforms: {
			effectFactor: { type: "f", value: intensity },
			dispFactor: { type: "f", value: 0.0 },
			texture: { type: "t", value: texture1 },
			texture2: { type: "t", value: texture2 },
			disp: { type: "t", value: disp }
		},

		vertexShader: vertex,
		fragmentShader: fragment,
		transparent: false,
		opacity: 1.0
	});

	var geometry = new THREE.PlaneBufferGeometry(
		parent.offsetWidth,
		parent.offsetHeight,
		1
	);
	var object = new THREE.Mesh(geometry, mat);
	scene.add(object);

	var addEvents = function(){
		var evtIn = "mouseenter";
		var evtOut = "mouseleave";
		if (mobileAndTabletcheck()) {
			evtIn = "touchstart";
			evtOut = "touchend";
		}
		parent.addEventListener(evtIn, function(e) {
			TweenMax.to(mat.uniforms.dispFactor, speedIn, {
				value: 1,
				ease: easing
			});
		});

		parent.addEventListener(evtOut, function(e) {
			TweenMax.to(mat.uniforms.dispFactor, speedOut, {
				value: 0,
				ease: easing
			});
		});
	};

	if (userHover) {
		addEvents();
	}

	window.addEventListener("resize", function(e) {
		renderer.setSize(parent.offsetWidth, parent.offsetHeight);
	});


	this.next = function(){
		TweenMax.to(mat.uniforms.dispFactor, speedIn, {
			value: 1,
			ease: easing
		});
	}

	this.previous = function(){
		TweenMax.to(mat.uniforms.dispFactor, speedOut, {
			value: 0,
			ease: easing
		});
	};

	var animate = function() {
		requestAnimationFrame(animate);

		renderer.render(scene, camera);
	};
	animate();


};
$(document).ready(function(e) {
	Array.from(document.querySelectorAll(".displacement-hover")).forEach(e => {
		const t = Array.from(e.querySelectorAll("img"));
		new hoverEffect({
			parent: e,
			intensity: e.dataset.intensity || void 0,
			speedIn: e.dataset.speedin || void 0,
			speedOut: e.dataset.speedout || void 0,
			easing: e.dataset.easing || void 0,
			hover: e.dataset.hover || void 0,
			image1: t[0].getAttribute("data-src"),
			image2: t[1].getAttribute("data-src"),
			displacementImage: e.dataset.displacement
		});
	});
});

/* Flickity Slider
// ================================ */
var $slider = $('.project-slider');
$slider.flickity({
	cellAlign: "left",
	pageDots: false,
	contain: true,
	percentPosition: false,
	arrowShape: "M98.8,42.4v15.7H30.3l25.3,14.7v15.9L1.2,56.9V43.6l54.5-32.3V27L30.3,42.4H98.8z"
});

/* Mouse Events
// ================================ */
if (!isMobile) {
	const $body = $("body");
	$(".project-slider").mouseenter(function() {
		$body.addClass("project-slider__hover");
	}).mouseleave(function() {
		$body.removeClass("project-slider__hover");
	});
	$('.project-slide__inner').mouseenter(function() {
		$body.addClass('project-slider__item-hover');
	}).mouseleave(function() {
		$body.removeClass('project-slider__item-hover');
	});
	$slider.on( 'pointerDown.flickity', function( event, pointer ) {
		$body.addClass("project-slider__grab");
		console.log(pointer);
		document.ontouchmove = function (e) {
			e.preventDefault();
		}
	}).on( 'pointerUp.flickity', function( event, pointer ) {
		$body.removeClass("project-slider__grab");
		document.ontouchmove = function (e) {
			return true;
		}
	});
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

style.scss

@font-face {
	font-family: "PureHeart";
	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/PureHeart-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

// Codepen Centering & BG
// ================================
html {
	// vcenter
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 62.5%;
	body {
		width: 100%;
	}
}
body {
	margin: 0;
	font-family: "Cousine", sans-serif;
	background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/318335/gradient-wave-bg.jpg");
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	background-color: #000;
	&:before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(#000, 0.5);
		z-index: -2;
	}
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
*, *:before, *:after {
	box-sizing: border-box;
}
section {
	position: relative;
	padding: 6.4rem;
}
.parallax-element {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	svg {
		fill: #fff;
		width: 12vw;
		height: 12vw;
		fill-opacity: 0.2;
	}
	h1 {
		color: #fff;
		font-family: "PureHeart";
		font-size: 10vw;
	}
}
.swirls {
	position: relative;
	z-index: -1;
}
$color-main: #fff;

// Cursor & Hover/Grab States
// ================================
.cursor {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 999999;
	mix-blend-mode: exclusion;
	display: none;
	.cursor__core, .cursor__ring, .cursor__arrows {
		position: absolute;
	}
	.cursor__core {
		width: 0.8rem;
		height: 0.8rem;
		border-radius: 50%;
		margin: -0.4rem 0 0 -0.4rem;
		pointer-events: none;
		transition: width 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), filter 0.4s ease-in-out, opacity 0.2s ease-in-out;
		background-color: $color-main;
		mix-blend-mode: exclusion;
	}
	.cursor__ring {
		width: 2.4rem;
		height: 2.4rem;
		border-radius: 50%;
		margin: -1.2rem 0 0 -1.2rem;
		pointer-events: none;
		transition: width 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.4s ease-in-out;
		border: 0.1rem solid #fff;
	}
	.cursor__arrows {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 2rem;
		height: 1rem;
		margin: -0.5rem 0 0 -1rem;
		pointer-events: none;
		transition: opacity 0.2s ease-in-out;
		opacity: 0;
		z-index: 999999;
		mix-blend-mode: exclusion;
		.cursor__arrow {
			transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
		}

	}
	.cursor__icon {
		pointer-events: none;
		.cursor__eye, .cursor__mail {
			position: absolute;
			opacity: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 2rem;
			height: 2rem;
			margin: -1rem 0 0 -1rem;
			pointer-events: none;
			transition: opacity 0.2s ease-in-out;
			z-index: 999999;
			svg {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.project-slider__hover {
	.cursor {
		.cursor__core, .cursor__ring, .cursor__arrows {
			opacity: 1;
		}
		.cursor__core {
			width: 5.6rem;
			height: 5.6rem;
			margin: -2.8rem 0 0 -2.8rem;
		}
		.cursor__ring {
			width: 6.4rem;
			height: 6.4rem;
			margin: -3.2rem 0 0 -3.2rem;
		}
	}
}
.project-slider__item-hover {
	.cursor {
		.cursor__eye {
			opacity: 1;
		}
	}
}
.project-slider__grab {
	.cursor {
		.cursor__core {
			width: 0.8rem;
			height: 0.8rem;
			margin: -0.4rem 0 0 -0.4rem;
		}
		.cursor__arrows {
			.cursor__arrow {
				transition-delay: 0.1s;
			}
			.cursor__arrow--left {
				transform: translateX(-3.6rem);
			}
			.cursor__arrow--right {
				transform: translateX(3.6rem);
			}
		}
		.cursor__icon {
			.cursor__eye {
				opacity: 0;
			}
		}
	}
}
@media (min-width: 992px) {
	.cursor {
		display: block;
	}
}

// Slider
// ================================
.flickity-viewport {
	position: relative !important;
	&.is-pointer-down {
		.project-slide__image {
			transform: scale(0.9);
		}
	}
}
.flickity-slider {
	position: absolute;
	width: 100%;
	height: 100%;
}
.flickity-button {
	position: absolute;
	border: none;
	.flickity-button-icon {
		fill: transparent;
		stroke: #fff;
		stroke-width: 3;
		transition: fill 0.2s;
	}
	&:focus {
		outline: none;
	}
	&:active {
		opacity: 1;
	}
	&:disabled {
		opacity: 0;
		cursor: auto;
		pointer-events: none;
	}
	&:hover {
		.flickity-button-icon {
			fill: #fff;
		}
	}
}
.flickity-prev-next-button {
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	background: none;
	transition: opacity 0.2s;
}
.flickity-prev-next-button.previous { left: 20px; }
.flickity-prev-next-button.next { right: 20px; }
.flickity-prev-next-button .flickity-button-icon {
	position: absolute;
	top: 0;
	left: 0;
}

.project-slider {
	outline: none;
	overflow: hidden;
	margin: 0 -6.4rem 0 -6.5rem;
	padding-left: calc(12.5vw + 4.8rem);
	overflow: hidden !important;
	padding-right: calc(25vw + 3rem);
	counter-reset: case-counter;
	.project-slide {
		width: 75vw;
		margin-right: 4rem;
		padding: 4rem calc(12.5vw - 1.6rem) 0 0;
		&:nth-child(even) {
			padding-top: 12rem;
		}
		&__inner {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: row;
			&:before {
				position: absolute;
				display: flex;
				align-content: center;
				justify-content: center;
				font-size: 1.4rem;
				letter-spacing: 0.1rem;
				width: 2.4rem;
				height: 2.4rem;
				top: -2.4rem;
				left: -2.4rem;
				color: rgba(255, 255, 255, 0.25);
				content: '0' counter(case-counter);
				counter-increment: case-counter;
			}
		}
		&__title {
			position: absolute;
			left: -7.2rem;
			bottom: 6.4rem;
			z-index: 10;
			max-width: 36rem;
			white-space: normal;
			pointer-events: none;
			user-select: none;
			h4 {
				font-size: 3.6rem;
				line-height: 4.8rem;
				letter-spacing: 1.4rem;
				text-transform: uppercase;
				-webkit-text-stroke: 0.1rem #fff;
				color: transparent;
				transition: 0.4s ease-in-out;
				pointer-events: none;
				user-select: none;
			}
			&.project-slide__title--top-left {
				bottom: auto;
				top: 10.4rem;
			}
		}
		&__image {
			position: relative;
			width: 75vw;
			overflow: hidden;
			height: 0;
			padding-bottom: 144%;
			transition: 0.4s ease-in-out;
			canvas {
				width: 100% !important;
				height: 100% !important;
			}
		}
		&:hover {
			.project-slide__title {
				h4 {
					color: #fff;
				}
			}
		}
	}
}
.displacement-hover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	img {
		display: none;
	}
}
@media (min-width: 992px) {
	.project-slider {
		.project-slide {
			width: calc(36.55vw - 3.2rem);
			margin-right: 0;
			&__image {
				width: calc(25vw - 3.2rem);
			}
		}
	}
}

styles

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Cousine:700" rel="stylesheet" />