Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A vue extension that uses scrollama to scale items on scroll in a smooth motion (Its abit janky)
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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.