Gsap draggable not working with getboundingclientrect

[Oliver Wilcox]

I am a huge newbie when it comes to gsap, however i wanted to create a rotating wheel with numbers on it inspired by a ui i saw. I used draggable hittest to detect the collision of the number and the collision box placed on the screen.

 

however when i went outside the current viewport the collision was actually colliding with other elements on all 4 sides of it.

 

I saw that there was really no way to fix this with the gsaps collision detection so i thought of a method of only detecting if the element collides with the hitbox AND is also inside the viewport.

 

however it does not seem to register when the number goes into the viewport after rotating and only registers it onload... even if i use a setinterval function that runs multiple times, it does not seem to work. Any reason as to why? could i change it somehow to detect when the number goes into the viewport from draggable rotation? Or is there a way to fix the collision to only collide with the number its meant to collide with?

 

Thank you for the read! I hope i can find some way to fix this very soon :).

 

 

 

[GreenSock]

Welcome to the forums, @Oliver Wilcox. I'm not sure I understand the question/problem - could you please provide a minimal demo? We'd love to help - it's just tough without seeing it in context. You don't need to provide your whole project (in fact, please don't) - just the smallest amount of elements/code to show the issue. https://greensock.com/demo

 

 

[OSUblake]

7 hours ago, Oliver Wilcox said:

Any reason as to why? could i change it somehow to detect when the number goes into the viewport from draggable rotation?

 

Definitely don't know what you're asking, but if you're rotating an element, then getBoundingClientRect might not be the values you are expecting. This demo draws the coordinates of getBoundingClientRect around rotating elements.

 

See the Pen wRvjJL by osublake (@osublake) on CodePen.

 

If you're trying to do circle collision detection, that's super easy. Just compare the distance to the sum of the radii.

 

 

 

See the Pen LYNLxYr by osublake (@osublake) on CodePen.

 

 

 

[Oliver Wilcox]

hello, sorry for the late response, ive been away, also i cant seem to get codepen loading which is odd, is says the site is up..

 

sorry if my terminology is not the best, i havent been programming for exactly the longest time, but here ill try explain and show it the best i can!

 

So the red dots are the draggable hittest collision boxes and as can see its hitting mulitple numbers from each end and not just the one intended, why is this happening? is there a possible fix with gsaps collision boxes?

 

if not, i was thinking that maybe i could only run the function if that specific number is in the viewport due to having only a quarter of the circles in the viewport like in the second screenshot, would this work?

 

 

 

 

 

[ZachSaucier]

Hey Oliver. Without seeing the code ourselves it's impossible for us to say why that's happening.

[Oliver Wilcox]

thats totally fine. ill try get codepen running. idk why the page wont load at all

 

[Oliver Wilcox]

would it help to provide the code here at all without the demo? just maybe send it across the forum?

[ZachSaucier]

Try using a site other than CodePen. JSFiddle is a good alternative. 

[Oliver Wilcox]

Heya, managed to get codepen working, here! 

 

See the Pen MWyVgKm by nottherealone (@nottherealone) on CodePen.

 

So pretty much just so you get the jist of whats going on if you scroll out of the main viewport/window youll see the hittest is getting multiple numbers and being inconsistent with its collision.

 

i was thinking to make it so its overflow hidden and it only catches the numbers inside the viewport with getboundingclientrect somehow if theres not an easier fix to this.

 

I am also using a set interval function to make sure it runs after onload.

 

Thanks :).

 

 

[ZachSaucier]

Hey Oliver. I think it'd be good for you to take a step back and learn more about CSS and JavaScript before continuing. Specifically I think you should learn a bit about CSS positioning/layout and DRY programming  Also this sort of project is often good for using SVG. You can even create all of the assets in a visual editor that way which is nice. Another good article for you to read would be my article about animating efficiently. 

 

What's your end goal? Most likely there's an easier way than a hit test to get what you're wanting to do.

[Oliver Wilcox]

Heya sorry i have very much rushed this! I am very busy on and off right now. I didnt realise the positioning was way off.

In my vue project its all in a container, meaning its fully responsive.

I am creating  a clock app with sections with a world clock using google api, an alarm, stopwatch and timer. as you can see here.

 

I would say im quite confident in js and css, sorry this really isnt representing me well ahaha. I very much rushed the codepen as my app is using vue, so the code is quite different when converting, thats why it may be quite repetitive. 

 

Im using the collision to get the numbers and the am/pm and convert it to see if it matches the current time to set off the alarm. i also have some animations as I am working on getting the timeleft and also the alarmtime which is just the value in the collision boxes.

 

It should be all responsive now. Sorry about that!

[Oliver Wilcox]

also using the rotation of the clock here to display the time from the wheel which is important for the collision boxes

 

[ZachSaucier]

Again, I wouldn't use a hit test. I would just use the rotation value in the Draggable's onUpdate to determine which number is being selected. 

[Oliver Wilcox]

Thank you! I was looking into that, the hittest seemed a lot simpler at first as i didnt think it would have this problem.