Rick May Posted November 14, 2019 Share Posted November 14, 2019 While switching a project over to v3, I bumped into an issue that I wasn't experiencing in v2. I'm having trouble wrapping my head around how I can get the same behavior with the new GSAP. Here is what I was doing in 2.x: 1) Create a draggable that would call a function in the "onPress". 2) That function would simply update the bounds and change the snap. The reason I did it this way was to re-apply snap/bounds in the onPress based on values changing as the user interacts with the site. I'm sure there is a better way, but this was what I could quickly come up with in my limited Draggable experience. I'm all ears for a better approach that works with v3. this.draggableObj[0] = Draggable.create(this.screen[0], { type: 'y', snap: {y:0}, onPress: this.draggable__onPress, }); draggable__onPress() { const someValue = 10; const anotherValue = -10; this.draggableObj[0].vars.snap.y = [0, someValue]; this.draggableObj[0].applyBounds({ minY: anotherValue, maxY: 0 }); } This is causing errors while using with v3 ("Uncaught TypeError: Cannot read property 'snap' of undefined") and ("Uncaught TypeError: this.draggableScreen[0].applyBounds is not a function"). Any direction on how I can make this work? Thanks Rick Link to comment Share on other sites More sharing options...
OSUblake Posted November 14, 2019 Share Posted November 14, 2019 I can't say much about your snapping issue without seeing a demo, but your errors are probably related to scope. This is better. this.draggableObj = new Draggable(this.screen[0], { type: 'y', snap: {y:0}, onPress: this.draggable__onPress, callbackScope: this }); draggable__onPress() { const someValue = 10; const anotherValue = -10; this.draggableObj.vars.snap.y = [0, someValue]; this.draggableObj.applyBounds({ minY: anotherValue, maxY: 0 }); } 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 14, 2019 Share Posted November 14, 2019 Hey Rick, thanks for being a Shockingly Green member! As Blake suggested, a minimal demo would greatly aid us in helping you. The below thread can help you set it up: 2 Link to comment Share on other sites More sharing options...
Rick May Posted November 15, 2019 Author Share Posted November 15, 2019 Thanks guys. After trying to make a reduced example, I decided to write it as a functional component instead of a class. It is now working as a functional. I haven't had a chance to figure out what the reason is. When I find time, I'm going to re-write my project's component (with the draggable) as a functional to try and sort out what is going on. I'll be back once I've figured it out. Thanks again, Rick 1 Link to comment Share on other sites More sharing options...
st3f Posted November 26, 2019 Share Posted November 26, 2019 I have exactly the same problem. Link to comment Share on other sites More sharing options...
Rick May Posted November 26, 2019 Author Share Posted November 26, 2019 29 minutes ago, st3f said: I have exactly the same problem. I never did get it working when my component was a class and never investigated further (where it was working fine in v2.x) since ultimately I'd rather use a functional anyway. Are you using a class? Rick Link to comment Share on other sites More sharing options...
st3f Posted November 26, 2019 Share Posted November 26, 2019 Yes. And it was working in v2 for us too. I'm in charge of doing some experiments but I'm a bad coder . Our divs are just "interfaces" of classes doing a lot of things. In a Node app, I forgot to say. Link to comment Share on other sites More sharing options...
GreenSock Posted November 27, 2019 Share Posted November 27, 2019 10 hours ago, st3f said: Yes. And it was working in v2 for us too. I'm in charge of doing some experiments but I'm a bad coder . I'm very curious about code that was working in v2 but not in v3. @OSUblake was totally right about scope being the problem in that first sample code, but that would have the same problem in v2 so that's why I would love to see a demo. It's just super difficult to troubleshoot blind. @st3f what are the exact errors you're encountering? Link to comment Share on other sites More sharing options...
st3f Posted November 27, 2019 Share Posted November 27, 2019 @GreenSock, it's really impossible to show a "demo" extrapolated from a demi/big app. it takes a lot of time and, in the same time, I'm working with deadlines etc. En bref, it could be very nice to tell Draggable who is the class that instantiated it (when you are using classes for almost everything). It's two days I'm using my free time (aka night) trying to copy some "whatever classes" on codepen but I don't understand the emulator and I have no time to study. Later today I will try to post an example. Bonne journée a tous Link to comment Share on other sites More sharing options...
st3f Posted November 27, 2019 Share Posted November 27, 2019 Hi @GreenSock here where I'm stuck (to show you then an example ) See the Pen QWWXxGW by st3f (@st3f) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 Check your console. You have a bunch of syntax errors. See the Pen a138460b6ea40251c66054d8f8786351 by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
st3f Posted November 27, 2019 Share Posted November 27, 2019 Well, @OSUblake thank you, but that's really bizarre... If I add console.clear() to my code, is not working. If I paste and copy your code into my pen, it is. But the two scripts look identical. What am I missing? Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 I'm not sure what you mean. Show me what doesn't work. Link to comment Share on other sites More sharing options...
st3f Posted November 27, 2019 Share Posted November 27, 2019 Comment my version, de-comment yours and you will see. I think I have a browser issue (only with CodePen, though), typed text is identical but not the same See the Pen QWWXxGW by st3f (@st3f) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 But they aren't the same. I fixed the errors in yours. // Mine constructor(data){ this.id = data.id; this.width = data.width; this.height = data.height; this.container = $('<div id="container'+ this.id +'" class="font-barlow-semi">'+ this.id +'</div>'); this.container.css({'width':this.width, 'height':this.height,'background':'rgba(0,0,0,0.3)'}); } // Yours constructor(data){ this.id = data.id; this.width = data.width; this.height = data.height; this.container = $('<div id="container'+ this.id +'" class="font-barlow-semi">'+ this.id +'</div>'); this.container.css({'width':this.width, 'height':this.height,'background':'rgba(0,0,0,0.3)'; }); } Remove that semicolon. 3 Link to comment Share on other sites More sharing options...
st3f Posted November 27, 2019 Share Posted November 27, 2019 Ooohhh! Thank you so much! Actually, Codepen's console was mute, and I didn't see the error. Blind guy. Merci beaucoup 1 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