Jump to content
Search Community

Draggable fixed elements disappear when dragging after scroll

studioalloy test
Moderator Tag

Recommended Posts

I'm trying to create a menu that floats on top of the page (fixed) with each page reload having it them position differently. This is of course really annoying, but you can drag the items to a position of you choosing.

 

But after you've scrolled the page and try to drag the items they disappear (I think, they think they're still at their original (absolute) position), but am not sure. 

 

I've found a topic that also talks about fixed postion elements, but that is about a rotation and doesn't really talk about solutions, just new versions of the Draggable Plugin https://greensock.com/forums/topic/19771-misbehavior-of-draggable-knob-while-in-fixed-positioned-context/

There is also nothing in the docs about dragging fixed elements https://greensock.com/docs/v3/Plugins/Draggable

See the Pen NWqdZxb by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

Hey @mvaneijgen and thanks for posting. 

 

This issue was brought up before but it looks like there has been a regression. We'll get it fixed and get back to you as soon as we can! 

 

Side notes: 

  • It's extremely minor, but a slight performance increase would be to fix the position of the container of these elements and then position these elements with position: absolute.
  • A more significant performance increase would be to use x and y instead of top and left
  • You can shorten and simplify the setting of the values by using GSAP's .set() method:
    gsap.set(item, {x: Math.floor(Math.random() * widthMin - 230), y: Math.floor(Math.random() * heightMin + 30)});

     

Link to comment
Share on other sites

@ZachSaucier I was implementing your suggestions and I think I've found another bug, but now in macOs Safari 13.0.5 (15608.5.11) if the items are fixed I can drag them fine in Safari

See the Pen VwLpyva by mvaneijgen (@mvaneijgen) on CodePen

 

But if the container is fixed and the items absolute in there I can't drag them 

See the Pen VwLpyva by mvaneijgen (@mvaneijgen) on CodePen

 

This happens in both versions of the plugin 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.0/Draggable.min.js

 

 

  • Thanks 1
Link to comment
Share on other sites

  • 6 months later...

Ah, very interesting - I actually tested that exact [original] demo with 3.5.x and it worked great, but I see that it broke in your updated Vue-based one so I dug into it and discovered it had solely to do with the fact that you had body { margin: 0; } on this recent one. Weird! That led me to uncover the cause of the regression - it'd only happen when the global matrix was identity, meaning no offsets at all. That should be fixed in the next release which you can preview at https://assets.codepen.io/16327/Draggable3.min.js

 

Thanks for pointing that out, and sorry about any confusion there. 

  • Like 2
Link to comment
Share on other sites

Wauw. That sounds weird. I was debugging myself, but I since have made so many forks of this pen and didn't understand why some are working, but others not. What a find. 

 

So if I give the container a offset with `padding` or `top`, `left` it would also fix it for now on my production site where I import gsap from NPM?

Link to comment
Share on other sites

16 minutes ago, studioalloy said:

So if I give the container a offset with `padding` or `top`, `left` it would also fix it for now on my production site where I import gsap from NPM?

Probably. Give it a shot :)

 

Or you're welcome to use that prerelease version. I can send a .tgz file to npm install if that's what you need. 

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