Popmotion carousel fix for new version
If you look at the Decay documentation you'll see:
Note: This animation is deprecated in favour of inertia.
The documentation of inertia animation: https://popmotion.io/api/inertia/
A codepen: https://codepen.io/popmotion/pen/BMNvqj
And this is a live example:
const { styler, inertia, listen, pointer, value, calc } = window.popmotion;
const slider = document.querySelector('.carousel');
const divStyler = styler(slider);
const sliderX = value(0, v => divStyler.set('x', v));
listen(slider, 'mousedown touchstart').start(() => {
pointer({ x: sliderX.get() })
.pipe(({ x }) => x)
.start(sliderX);
});
listen(document, 'mouseup touchend').start(() => {
inertia({
min: -slider.scrollWidth, //0,
max: -0, //getBoundariesWidth(),
from: sliderX.get(),
velocity: sliderX.getVelocity(),
power: 0.6,
bounceStiffness: 400,
bounceDamping: 20
})
.start(sliderX);
});body {
--pink: #ff1c68;
--green: #14d790;
--blue: #198fe3;
--black: #21282d;
--purple: #9b65de;
color: #222;
background: #49a9f8;
font-family: 'PT Sans', sans-serif;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-direction: column;
overflow: hidden;
padding: 0 20px;
}
.pen {
flex: 1 1 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
margin: 0 auto;
width: 100%;
max-width: 600px;
}
.created-by {
flex: 0 0 50px;
background: #fff;
color: #222;
text-decoration: none;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 30px;
margin: 0 -20px;
}
.logo {
margin-left: 10px;
}
h1 {
font-size: 32px;
line-height: 28px;
margin-bottom: 10px;
color: white;
}
.pen a {
color: white;
margin-bottom: 70px;
}
.carousel {
display: flex;
align-items: stretch;
height: 100px;
position: relative;
background: #6dc1f9;
width: 100%;
border-radius: 5px;
}
.carousel .item {
background: white;
border-radius: 5px;
margin-right: 15px;
flex: 0 0 100px;
}
.carousel .item:nth-child(4n + 2) {
background: var(--green);
}
.carousel .item:nth-child(4n + 3) {
background: var(--pink);
}
.carousel .item:nth-child(4n + 4) {
background: var(--blue);
}<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div class="pen">
<h1>Inertia playground</h1>
<a href="https://popmotion.io/api/inertia" target="blank">View docs</a>
<div class="carousel">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>If you want to use the decay animation:
const { styler, decay, listen, pointer, value, transform } = window.popmotion;
const { clamp } = transform;
const slider = document.querySelector('.carousel');
const divStyler = styler(slider);
// const sliderX = value(0, divStyler.set('x'));
const sliderX = value(0, v => divStyler.set('x', v));
listen(slider, 'mousedown touchstart').start(() => {
pointer({ x: sliderX.get() })
.pipe(({ x }) => x)
.start(sliderX);
});
listen(document, 'mouseup touchend').start(() => {
decay({
from: sliderX.get(),
velocity: sliderX.getVelocity()
}).pipe(clamp(-slider.scrollWidth, 0))
.start(sliderX);
});body {
--pink: #ff1c68;
--green: #14d790;
--blue: #198fe3;
--black: #21282d;
--purple: #9b65de;
color: #222;
font-family: 'PT Sans', sans-serif;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.pen {
flex: 1 1 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
margin: 0 auto;
flex: 1 1 100%;
width: 100%;
max-width: 600px;
padding: 0 20px;
}
.created-by {
flex: 0 0 50px;
background: #fff;
color: #222;
text-decoration: none;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 30px;
}
.logo {
margin-left: 10px;
}
h1 {
font-size: 32px;
line-height: 28px;
margin-bottom: 10px;
}
.pen a {
color: var(--blue);
text-decoration: none;
margin-bottom: 70px;
}
.carousel {
display: flex;
align-items: stretch;
height: 150px;
position: relative;
}
.carousel .item {
background: var(--purple);
border-radius: 5px;
margin-right: 15px;
flex: 0 0 110px;
}
.carousel .item:nth-child(4n + 2) {
background: var(--green);
}
.carousel .item:nth-child(4n + 3) {
background: var(--pink);
}
.carousel .item:nth-child(4n + 4) {
background: var(--blue);
}<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div class="pen">
<h1>Decay playground</h1>
<a href="https://popmotion.io/api/decay" target="blank">View docs</a>
<div class="carousel">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>Codepen Decay demo: https://codepen.io/anon/pen/GaLpwR