Jump to content
GreenSock

glenn_pot

GSAP and Draggable conflicts?

Moderator Tag

Recommended Posts

I'm running two completely separate functions and loading 4 libraries/plugins:

/gsap.min.js

/TweenMax.min.js

/Draggable.min.js

/ThrowPropsPlugin.min.js

 

function #1 is uses the gsap.timeline tool 

function #2 is uses TweenLite, Draggable and ThrowPropsPlugin.

 

#1 works great if I comment out the TweenMax, Draggable and ThrowProps scripts.

#2 works great if I comment out the gsap.min.js script.

 

Is there some obvious reason why they won't work together?

 

Link to comment
Share on other sites

Hey Glenn. TweenMax is from the old version of GSAP - you shouldn't use it. You just need the GSAP core file (gsap.min.js) and the GSAP 3 versions of the plugins. See the migration guide for more info.

  • Like 2
Link to comment
Share on other sites

Thanks for the super quick reply @ZachSaucier.

This is the TweenMax, Draggable, ThrowProps portion of my code, which works but I guess now needs to be updated.

See the Pen NWRoJjp by glenn_pot (@glenn_pot) on CodePen

 

I read the guide you shared and swapped out TweenLite and TweenMax instances and I'm getting "Uncaught ReferenceError: Draggable is not defined"

See the Pen VwKRpYe by glenn_pot (@glenn_pot) on CodePen

Link to comment
Share on other sites

Your pen is still loading Draggable 1.20. You'll need to use version 3 and use the inertia plugin instead of ThrowProps.

 

https://unpkg.com/gsap@3/dist/Draggable.min.js

 

See the Pen 5085a9936999d3a510ec69da5f2d5a0d by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

@PointC I'm still not seeing a working carousel after these updates though. The error is gone now, but the slider build is still not working properly.

Link to comment
Share on other sites

hmmm... seems okay to me. Maybe I didn't save when I reposted it. Should be alright now.

 

PS I made a slight adjustment to your update progress function. I seem to remember that GSAP 3 deprecated negative progress so I'm keeping it between 0—1 in the fork. 

  • Like 4
Link to comment
Share on other sites

Thank you so much @PointC, huge help today. I've worked this into my project now and everything is working in tandem now :)

  • Like 1
Link to comment
Share on other sites

Happy to help. That's how we roll in the GreenSock neighborhood.

 

Thank you for your support with a Club membership. Good luck with your project. :)

  • 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.
×