Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
st3f

Dragging a div containing an image

Recommended Posts

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

  • Thanks 1
Link to post
Share on other sites

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!

  • Like 1
Link to post
Share on other sites

You are welcome @ZachSaucier! Just to know, if I put the image in the div background, this problem is not occurring.

Link to post
Share on other sites

Having exactly the same issue in all browsers. Looking forward to the next release.

Link to post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites

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

 

 

Link to post
Share on other sites
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? 

  • Like 1
Link to post
Share on other sites

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. 

  • Like 1
Link to post
Share on other sites
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.

  • Like 1
Link to post
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.

×