Sublimio Posted February 12, 2022 Share Posted February 12, 2022 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 Link to comment Share on other sites More sharing options...
nico fonseca Posted February 12, 2022 Share Posted February 12, 2022 Hey @Sublimio, welcome to the forum ! 💚 You can do something like this 🙂 : See the Pen 31c0cc92d31034d23a055f23966b254b by nicofonseca (@nicofonseca) on CodePen Happy tween! 🎉 1 Link to comment Share on other sites More sharing options...
nico fonseca Posted February 12, 2022 Share Posted February 12, 2022 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 InertiaPluginhttps://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 🙌 3 Link to comment Share on other sites More sharing options...
Sublimio Posted February 12, 2022 Author Share Posted February 12, 2022 oh, great! thank you so much sir 1 Link to comment Share on other sites More sharing options...
Sublimio Posted February 16, 2022 Author Share Posted February 16, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted February 16, 2022 Share Posted February 16, 2022 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 1 Link to comment Share on other sites More sharing options...
Sublimio Posted February 16, 2022 Author Share Posted February 16, 2022 oook thank you Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now