convert draggable demo provided in greensock site from gsap1 to gsap3

[Sublimio]

Hi,
I can't figure out how to convert the code provided by the demo from gsap1 to the latest version. If I include gsap3 all slide placements are wrong

 

thx a lot

 

See the Pen JjYbjaM by gooogooo (@gooogooo) on CodePen

[nico fonseca]

Hey @Sublimio, welcome to the forum ! 💚

You can do something like this 🙂 : 

See the Pen 31c0cc92d31034d23a055f23966b254b by nicofonseca (@nicofonseca) on CodePen

 

Happy tween! 🎉

[nico fonseca]

The changes needed to update the demo to the new gsap version are :

- Update all src to newest

https://unpkg.co/gsap@3/dist/gsap.min.js

https://assets.codepen.io/16327/InertiaPlugin.min.js // ThrowPropsPlugin now is InertiaPlugin
https://unpkg.com/gsap@3/dist/Draggable.min.js
 

- Change the default props

TweenLite.defaultEase = Linear.easeNone;

to 

gsap.defaults({
  ease: "none", 
});

- Change all TweenMax to gsap

- Remove throwProps and add inertia to Draggable 

- Use the wrap function to update the animation progress 

const wrap = gsap.utils.wrap(0, 1);
function updateProgress() {  
  animation.progress(wrap(this.x / wrapWidth));
}

 

Hope this helps 🙌

 

[Sublimio]

oh, great!
thank you so much sir

[Sublimio]

I modified the code by adding dots to scroll through the slides. dots progress animation and update draggable. But going back to dragging I can see that I didn't actually sync draggable because it picks up where it left off.

 

draggable.update ()

is not the right way?

See the Pen gOXXoeQ by marco-catone (@marco-catone) on CodePen

[OSUblake]

If you want to reference a function in a callback, you just provide the name...

 

gsap.to(animation, 1, {
    progress: cellStep * ix,
    ease: Back.easeOut,
  
    // BAD - immediately calls function
    onComplete: completeAnimation()
  });


gsap.to(animation, 1, {
    progress: cellStep * ix,
    ease: Back.easeOut,
  
    // GOOD
    onComplete: completeAnimation
  });

 

But that won't fix the problem. The issue is that when you animate the progress like that, the proxy is going to out of sync, so you will need to reset the proxy's x values to match the animation's progress. Notice what I'm doing in the onPress.

 

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

 

[Sublimio]

oook thank you