Updating Draggable examples to GSAP3

[Richard1604]

Hello, 

i have been experimenting with the Draggable demos and I would like to upgrade them to the current version of green sock.

In particular  is of interest with its Responsive, Draggable, Scrollable AutoSlider.

It works fine when I use the gsap2 libraries and I am familiar with simple upgrades of Tweens and Timelines but in this case I get an error function updateProgress:

 

function updateProgress() {
  animation.progress(transform.x / wrapWidth);

}

 

Uncaught TypeError: Cannot read property 'x' of undefined
    at updateProgress (gsdraggable2.js:65)

 

I would really appreciate some general guidance on the process required to convert the old style demos to the current version.

Thanks.

 

 

 

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

[GreenSock]

Sure, here's a ported version:

See the Pen VwaWdoB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

That old demo was using the _gsTransform object that was attached to elements to store their transform-related values, but that was removed in v3 in favor of a much more powerful and consistent gsap.getProperty() method. So you can do gsap.getProperty(proxy, "x") in this case. 

 

Happy tweening!

[Richard1604]

that's brilliant thank you.

I can now see what I need to do to upgrade the others too.