A vue extension that uses scrollama to scale items on scroll in a smooth motion (Its abit janky)

scrollama-scale.js

import 'intersection-observer';
import scrollama from 'scrollama';

const scroller = scrollama();

// setup the instance, pass callback functions
scroller
	.setup({
		step: settings.$refs.slide__item,
		container: settings.$refs.slide,
		offset: .25,
		threshold: 2,
		progress: true,
		enable: true
	})
	.onStepProgress(onProgress)

function onProgress(element) {
	let progressPercentage = 0.2;
	let sizeBoundary2 = 1;
	let sizeBoundary1 = .9;
	let sizeDiff = sizeBoundary1 - sizeBoundary2;
	let boundary = 20;
	let topBondary = 100 - boundary;
	let size;

	progressPercentage = element.progress < 1 ? element.progress * 100 : progressPercentage;

	if (boundary < progressPercentage && progressPercentage < topBondary) {
		size = sizeBoundary2;
	} else if (progressPercentage >= 50) {
		let insideSize = 100 - progressPercentage;
		let insideSizePercentages = (insideSize / 15);

		size = sizeBoundary1 - (sizeDiff * insideSizePercentages);
	} else if (progressPercentage < 50) {
		let insideSizePercentages = (progressPercentage / 15);

		size = sizeBoundary1 - (sizeDiff * insideSizePercentages);
	}

	let myEl = element.element;
	let childCard = myEl.children[0];

	if (size > 1) {
		size = 1;
	}

	if (element.index === 0 && settings.$refs.slide.scrollLeft === 0) {
		size = 1;
	}

	childCard.style.transform = 'scale(' + size + ')';
}

// setup resize event
window.addEventListener('resize', () => {
	scroller.resize();
});