How to get velocity value on gsap v3+?

[Julia Shikanova]

Hello
I need to achieve similar effect (transforming/skew slides on drag), but I can't figure out how to get velocity value on v3+?
Please, help me to figure this out 

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

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

By looking at the documentation of the inertia plugin, the approach is pretty much the same with some minor changes in the code. This seems to be working kind of OK:

createDraggable() {
  var slider = this.slider,
      tracker = VelocityTracker.track(slider, "x")[0],
      pressedTop; //when the users presses down, if the mouse is in the top half of the image, pressedTop will be true. We use this to make the skewing more natural, like the mouse is "pulling" that part of the image
  this.draggable = Draggable.create(this.proxy, {
      type: "x",
      edgeResistance: 0.75,
      onPress: function(e) {
        var bounds = this.target.getBoundingClientRect();
        pressedTop = (e.clientY < bounds.y + bounds.height / 2);
        //keep track of how far apart the proxy is from the slider because when the user presses down, we want to IMMEDIATELY stop any motion, thus this offset value becomes baked in until release.
        // this.offset = this.x - slider._gsTransform.x;
        this.offset = this.x - parseFloat(slider._gsap.x.replace(/px/g, ""));
        gsap.killTweensOf(slider); //in case it's moving
        gsap.to(slider, { duration: 0.2, skewX:0 });
      },
      onDrag: function() {
        gsap.to(slider, {
          duration: 0.8,
          x:this.x - this.offset, 
          skewX:"+=1", //meaningless - we tweak the values in the modifier below. We needed to make the skewX tween to something just so that it's included in the tweening values.
          modifiers:{
            //skew based on the current velocity, capped at 20 in either direction
            skewX:function(v) {
              var skew = tracker.get("x") / 200;
              if (skew > 20) {
                skew = 20;
              } else if (skew < -20) {
                skew = -20;
              }
              return pressedTop ? -skew : skew;
            }
          }, 
          ease:Power2.easeOut
        });
      },
      onRelease: function() {
        //if the user just presses down and releases without really moving much at all, there's no need to do a throwProps tween.
        if (this.tween && Math.abs(tracker.get("x")) > 20) {
          gsap.to(slider, {
            duration: this.tween.duration(),
            inertia: { x: { end:this.endX } },
            ease:Power3.easeOut
          });
        }
        gsap.to(slider, { duration: 0.5, skewX:0, ease:Power1.easeOut })
      },
      //dragResistance: 0.5,
      bounds: this.container,
      inertia: true
  })[0];
}

Also you need to remove the skewType config in the setBounds method, since that was removed in GSAP 3:

setBounds() {
  this.sliderWidth = this.slides[0].offsetWidth * this.slidesNumb;

  gsap.set([this.slider, this.proxy], {
    width: this.sliderWidth, x:"+=0"
  });
}

As I mentioned this works kind of OK because there are a few jumps in the slider when you press and drag. Unfortunately I don't have time to go through the entire sample and try to find out.

 

Perhaps @GreenSock, @OSUblake or another user can shed some light on it and update that sample to the new syntax, but with those changes you can get the elements to skew properly.

 

Happy Tweening!!!

[OSUblake]

The only thing I would add is to enable overwrite....

gsap.defaults({
  overwrite: "auto"
});

 

And modifiers need to return a unit.

return (pressedTop ? -skew : skew) + "deg";

 

But it still a little weird. Probably just need to tweak some stuff.

 

[OSUblake]

I think the person that wrote that ended up not using draggable. 🤷‍♂️

 

See the Pen EEwrRp by ReGGae (@ReGGae) on CodePen

 

 

 

[Julia Shikanova]

// v2
var tracker = ThrowPropsPlugin.track(slider, "x");
var skew = tracker.getVelocity("x") / 200;

// v3
const skew = InertiaPlugin.getVelocity(slider, "x") / 200;

Thanks, but I was looking for this value

[OSUblake]

Yes, it's already tracking it because of the draggable.

 

If you're not using draggable, you can get it like this, which is what @Rodrigo showed. It still works the same.

 

// returns an array
const tracker = VelocityTracker.track(slider, "x")[0];

const tracker = InertiaPlugin.track(slider, "x")[0];

tracker.get("x");