Search the Community
Showing results for tags 'collision'.
Found 6 results
-
I have taken the Codepen for "Draggable with "droppable" logic" (located here) and forked it and rewritten a lot of it to to get the effect i am looking for. basically, i do not want any draggable item to EVER overlap any any other draggable item. I spent a good part of the morning today searching the forum and reading up in the docs trying to think of some form of simple collision detection. The idea being to detect a collision and have a simple collision event that would make the divs bounce off of each other. that is not built in to gsap (should be!) and I have not found anyone on the forum who has successfully done it. So I must try. What I have in my sample is the result of banging my newbie head on my monitor all day! it is not 100% collision detection (like I'm used to seeing in Unity) but it does prevent overlaps in a clunky sort of way. If you drag, say, box1, over any other box it will be tweened 100px repeatedly until it is no longer overlapping. Additionally, there is a recursiveness in the function calls. If, while moving box1 away from box2, box1 then overlaps box3, the recursive will continue to cycle the functions and the tween will be repeated until box1 is no longer overlapping any box. This works regardless of which box you drag around and drop. I say it is clunky because it tweens 100px, pauses, tweens another 100px, pases...and so forth until the dreaded overlapping is cured. Where I am stuck is replacing the 100px with the amount of overlap (plus some small amount so the box ends up a little bit away from the last box it overlapped). I have commented the code so you can see the varible names, etc. and understand what i am struggling with. As an added bonus, it would be nice, but not strictly necessary, to remove the clunkiness I mentioned above. One final comment, it may appear that this if for a game. It is not. I would do this in Unity if it were a game - or maybe Buildbox. This is actually just one step along the path I have chosen to build a "unique" interface for a desktop app I want to build using Electron.
-
Hey i'm trying to figure out something Say 2 objects are colliding and I'm doing something like TweenLite.to(tiles[0], 2, {physics2D:{velocity:400, angle:0}, onUpdate:checkCollision}); function checkCollision(){ var colliding = Draggable.hitTest(this.target, tiles[5]); if(colliding){ TweenMax.killTweensOf(this.target); } } What i want instead is to update the original tween's velocity/angle to be smaller and not kill the tween. Is that possible or do i have to make a new tween? Thanks!
-
Hi guys! I've been trying to figure out how to do a text that interacts with a object. With the text being push away from an object when it's near the object. I tried using on several physics library and it seems most of them are overkill and hard to control. (For example, its hard to bind the text back to its original position as the collision library either makes it a static or a dynamic [reacting to gravity]. ) Currently, there is what is on my head. Correct me if i'm wrong. I probably need to make use requestAnimationFrame to constantly detect the collision. As the collision object will probably be a constantly changing object. I can't seems to wrap my head around on how to create a Tween function that pushes a characters (near colliding object) out and then back when its not near the colliding object. Any help is appreciated
-
Hi forum! I've got a 2 part question: Question 1 I've forked a copepen sample that I found in the forums and I'm trying to figure our how to use collision detection to get the colorful balls to update the background color of the white balls as they cross over them. I'd like to have the changes be incremental rather than change absolutely i.e. #FFFFFF becomes #AAFFFF rather than #00FFFF if that makes sense. Question 2 Maybe this will become obvious once the collision detection question is answered but I'd also want the white balls to "swallow" the colorful balls as they cross paths. Are there any existing elegant ways to achieving this?
-
I am trying to figure out how to do collision detection with greensock and the CSS plugin. My CSS elements all have "position: absolute" and they are moved across the screen setting their x and y positions with TweenLite. Normally you could use the DOM elements' position to calculate if their boundaries intersect, but how can you do this with css transforms? Thanks!
-
Hello, I am very new to your api/code but definitely love it! Conceptually what is the best create a draggable div that snaps to a grid and can detect when it shares a cell with another div. Should I write validation a function in onThrowComplete (using the ThrowPropsPlugin)? Just looking for a little guidance.
