Jump to content

Oliver Wilcox

  • Posts

  • Joined

  • Last visited

Oliver Wilcox's Achievements



  1. Thank you! I was looking into that, the hittest seemed a lot simpler at first as i didnt think it would have this problem.
  2. also using the rotation of the clock here to display the time from the wheel which is important for the collision boxes
  3. 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!
  4. Heya, managed to get codepen working, here! https://codepen.io/nottherealone/pen/MWyVgKm 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 :).
  5. would it help to provide the code here at all without the demo? just maybe send it across the forum?
  6. 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?
  7. 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 :).