st3f Posted December 6, 2019 Share Posted December 6, 2019 Hi, I've searched a bit but I didn't find a solution (bad search terms, probably). In this example, if I drag the div clicking outside the image (on the red background) everything is ok, but if I click on the contained image, I have this strange behaviour (image is like not part of the draggable div). What is wrong with my code? Thanks in advance See the Pen WNbQNXP by st3f (@st3f) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 6, 2019 Share Posted December 6, 2019 Ooh, that is weird. Works fine for me in Chrome, FF has some weird behavior as you describe. This seems to be a bug in GSAP 3's version since it works fine with GSAP 2. @GreenSock can get it fixed quickly I'd bet. Thanks for bringing it to our attention, @st3f! 1 Link to comment Share on other sites More sharing options...
st3f Posted December 7, 2019 Author Share Posted December 7, 2019 You are welcome @ZachSaucier! Just to know, if I put the image in the div background, this problem is not occurring. Link to comment Share on other sites More sharing options...
GreenSock Posted December 11, 2019 Share Posted December 11, 2019 Okay, this should be fixed in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js. Thanks for pointing this out and sorry about any frustration that caused. 1 1 Link to comment Share on other sites More sharing options...
st3f Posted December 11, 2019 Author Share Posted December 11, 2019 Thank you Jack @GreenSock Link to comment Share on other sites More sharing options...
Aleksei Posted December 12, 2019 Share Posted December 12, 2019 Having exactly the same issue in all browsers. Looking forward to the next release. Link to comment Share on other sites More sharing options...
Aleksei Posted December 12, 2019 Share Posted December 12, 2019 On 12/11/2019 at 3:20 AM, GreenSock said: Okay, this should be fixed in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js. Thanks for pointing this out and sorry about any frustration that caused. Regarding the Draggable3 preview: I noticed that in combination with Inertia plugin the dragged element is jerking at the beginning of the drag. I don't know whether it is known issue or not, but just in case. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 12, 2019 Share Posted December 12, 2019 11 hours ago, Aleksei said: I noticed that in combination with Inertia plugin the dragged element is jerking at the beginning of the drag. I don't know whether it is known issue or not, but just in case. Hey Aleksei. Sorry that's happening for you. Could you please create a minimal demo of the issue? Link to comment Share on other sites More sharing options...
GreenSock Posted December 12, 2019 Share Posted December 12, 2019 11 hours ago, Aleksei said: Regarding the Draggable3 preview: I noticed that in combination with Inertia plugin the dragged element is jerking at the beginning of the drag. I don't know whether it is known issue or not, but just in case. @Aleksei I just added inertia to the original poster's codepen (a fork) and I don't notice any jerking, do you? See the Pen 0442fd6e872728346ed8e8b8d343f044?editors=0010 by GreenSock (@GreenSock) on CodePen Like @ZachSaucier said, a reduced test case would be super helpful for troubleshooting. I definitely want to fix anything that needs fixing. Link to comment Share on other sites More sharing options...
Aleksei Posted December 12, 2019 Share Posted December 12, 2019 Hello, Jack Here is my demo: See the Pen YzPWZyN by nordskill (@nordskill) on CodePen And just in case you won't be able to reproduce the issue, here is the screen record from Chrome browser on Windows. It is 60 fps. You can see that when I start throwing picture there is some jerking animation at the beginning. Sometimes it even doesn't allow image to slide to the endX or endY coordinate and image stops. But usually, after image moves a bit, then the motion becomes smooth. I've noticed this problem in several browsers. On Windows: All browsers based on Chromium engine have this issue. Firefox seems to animate smoothly. And the Edge browser is somewhere between "Chromiums" and Firefox. There is a bit of jerking, but not so obvious. On OSX: Chrome browser animates well. And Safari acts like Edge on Windows. Here is the same demo with GSAP 2, which works fine in all browsers: See the Pen QWwEdgq by nordskill (@nordskill) on CodePen screen-record.mp4 Link to comment Share on other sites More sharing options...
GreenSock Posted December 13, 2019 Share Posted December 13, 2019 4 hours ago, Aleksei said: when I start throwing picture there is some jerking animation at the beginning Ah, okay, I see the issue. Short answer: It should be resolved now (https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js) Explanation: By default, force3D is "auto" in GSAP which means that it'll use 2D values except WHILE the element is animating (it switches to 3D for that in order to maximize animation performance, involving the GPU). So as soon as the inertia tween started, it switched to 3D which means the browser layerizes it at that point and that takes a little time. It's not JavaScript performance at all - it's all about compositing in the browser. So in Draggable, I'm setting force3D to true so that it's ALWAYS using 3D values, thus there's no extra work for the browser to do between the time you release the mouse and the inertia tween begins. You could have manually achieved this with gsap.set(draggableElement, {force3D:true}), of course, but it's automatic now. Better? 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 13, 2019 Share Posted December 13, 2019 Also, I think the reason we didn't see the problem in other scenarios is because they weren't as difficult on the compositor - your demo had a box-shadow in the container element which is tough on the browser to render (requires more resources), especially because the thing it needed to layerize was INSIDE the element that had the box-shadow applied. 1 Link to comment Share on other sites More sharing options...
Aleksei Posted December 13, 2019 Share Posted December 13, 2019 6 hours ago, GreenSock said: Better? Yes! It is smooth now. I guessed that the problem is somehow related to the switching from translate to translate3d, but didn't know that the fix was so easy Thanks. 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