Popmotion carousel fix for new version

Question

This is not working for some reason.

https://popmotion.io/pure/ as mentioned here it has to be

const slider = document.querySelector('.slider');
const sliderX = value(0, styler(slider).set('x'))

listen(slider, 'mousedown touchstart').start(() => {
  pointer({ x: sliderX.get() })
    .pipe(({ x }) => x, clampMovement)
    .start(sliderX);
});

listen(document, 'mouseup touchend').start(() => {
  decay({
    from: sliderX.get(),
    velocity: sliderX.getVelocity()
  }).pipe(clampMovement)
    .start(sliderX);
});

whenever I use it clamp movement is showing as undefined. What should it be actually? Any may to make that working?

examples in docs didn't work for me https://popmotion.io/learn/input-tracking/ — Vadim Hulevich, Jun 04 '19 at 13:23
Indeed. The only example (of the slider) that works is the one on the front page of the website, showcasing the "decay" feature. No errors in the console either. — Seblor, Jun 04 '19 at 13:27
@Seblor exactly. The one in the website works not sure how the coding was done for that. — , Jun 04 '19 at 16:24

Fraction · Accepted Answer · 2019-06-05T09:10:08.567

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

Does that mean the carousel feature won't work anymore? The one in the main website seems to work smoothly? https://popmotion.io/pure/ — , Jun 04 '19 at 16:26
Actually, I didn't notice that you have posted the answer. Sorry about that. Thank you. There is a glitch with the carousel in the with inertia..if scrolled to left it goes way back to left..and if scrolled to right it's limited. Any way to fix that. — , Jun 04 '19 at 19:19
I think getBoundariesWidth calculation method has to be different — , Jun 04 '19 at 19:21

score 0 · Answer 2 · answered Jun 04 '19 at 13:49

0

This library didn't work, if you need fast solution you can switch to another library. For example swiper it has many examples and options.

Easy to setup and it works in many browsers.

Has good rate on github https://github.com/nolimits4web/swiper

answered Jun 04 '19 at 13:49

Vadim Hulevich

1,803
8
17

popmotion total size is just 12kb which makes it really cool if works as described in their website – Jun 04 '19 at 17:06

Popmotion carousel fix for new version

2 Answers2