Jump to content
Search Community

How to get velocity value on gsap v3+?

Julia Shikanova test
Moderator Tag

Go to solution Solved by Julia Shikanova,

Recommended Posts

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.
            //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;
      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 } },
        gsap.to(slider, { duration: 0.5, skewX:0, ease:Power1.easeOut })
      //dragResistance: 0.5,
      bounds: this.container,
      inertia: true

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!!!

Link to comment
Share on other sites

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];




  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...