Can't rewrite infinite carousel from gsap v2 to gsap v3

[AsKadir]

Hey,

I'm trying just rewrite the old codepen to gsap3:

See the Pen OKNadm by GreenSock (@GreenSock) on CodePen

Above is the old codepen!

 

Below is new codepen, which is not working.

There is no any errors, what am I doing wrong?

Can you help me, please?

See the Pen NWdVEYo by ChicagoJostik (@ChicagoJostik) on CodePen

[Rodrigo]

Hi,

 

The value passed to the modifiers plugin is actually a string and has px at the end, so basically the method is returning NaN. This seems to work:

function animateCarousel(delta) {
  gsap.to(boxes, {
    duration: boxes.length * 0.5,
    x: function(i, target) {
      var x = Math.round(gsap.getProperty(target, "x")) + wrapWidth * delta;
      return x;
    },
    ease: "none",
    modifiers: {
      x: function(x) {
        return wrap(parseFloat(x), -boxWidth, wrapWidth)
      }
    },
    repeat: -1
  });
}

function wrap(value, min, max) {
  var v = value - min;
  var r = max - min;
  return ((r + v % r) % r) + min + "px";
}

Happy Tweening!!!

[akapowl]

Ha, I was just in the works @Rodrigo 😅

 

This here seems to work.

 

Changes made on: 

wrapWidth

and modifiers-function and ease in animateCarousel(delta)

 

See the Pen bf1e71b0c9b6f0724dad04bc29fcb631 by akapowl (@akapowl) on CodePen

 

[AsKadir]

@Rodrigo@akapowl Thanks a lot, guys!!!