Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Oliver Wilcox

Gsap draggable not working with getboundingclientrect

Recommended Posts

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 :).




Screen Shot 2020-08-28 at 19.29.50.png

Screen Shot 2020-08-28 at 20.36.24.png

Screen Shot 2020-08-28 at 19.30.34.png

Link to comment
Share on other sites

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



  • Like 2
Link to comment
Share on other sites

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




  • Like 8
Link to comment
Share on other sites

  • 2 weeks later...

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?







Link to comment
Share on other sites

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

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :).



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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




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.