Run timeline if an element is to specific position (Drag / Drop)


(kostas) #1

Can someone hep me with the above problem. I want to create a script (propably an if statement) which is playing a timeline when two rectangles are in specific possision on the canvas. More specific i want the script to check if the two objects are in two different possisions (object A to possision A and object B to possision B) and if they do then run a timeline. Thank you in advance.

Advanced Drag and Drop
(René) #2

Are these objects moved by the user (dragged) or do change position with physics or a timeline animation?


As René has mentioned … need to know a little more to be more precise with the answers.

Note the following is pseudo code. The logic would be something like:

if (theBoundsOfObjA == theBoundsOfPositionA && theBoundsOfObjB == theBoundsOfPositionB) {
    play your timeline

Now, depending on the way you are moving your objects you would want to check for this condition inside that action and keep a record on the positions (bounds) of the objects as they move. Maybe a setInterval or using requestAnimationFrame

(kostas) #4

Thank you for your answers.i am uploading a sample…I want the timeline Correct to be played when the user sets the two boxes in a specific position…Posision (13.3 KB)


Hi Kostas!

You might have a look at the following:

It seems like this demo does just about everything You want with just a few minor adjustments required.

Below is the part in the code where You could run the timeline - however if simply getting the word “Correct” to appear is the only reason for running the “correct” timeline, the You could stick with the “innerHTML” approach as per the “” file.

I wrote in “Correct” in the example below so You could see where to put it - the above referenced Hype ZIP file does not use this text. But I think You get the idea. This is also where You would put the code to run a timeline if You still wished to do that.

“IntersectTest()” function from the “”

Rewards/points for dragging an element into a particular position
(Hans-Gerd ClaĂźen) #6

@JimScott is right, @Kostas you’re requestion dragNdrop … (23.8 KB)

Advanced Drag and Drop
(kostas) #7

First of al thankfor the answers.I am realising that i have confused you. I dont want to drag and drop anything. I want a script to check when the boxes are in the specific place (top and left properties) and then to triger a timeline. Of course the objects will be more than two. Mybe my english is bad sorry for that.


Maybe this is what you want? If you are just moving the elements on click.

This code should go in the CheckPosision() function:

var conditionA = hypeDocument.getElementProperty(box1, 'top') == "226" && hypeDocument.getElementProperty(box1, 'left') == "203";
var conditionB = hypeDocument.getElementProperty(box2, 'top') == "226" && hypeDocument.getElementProperty(box2, 'left') == "303";
if (conditionA && conditionB){ // are true
	// do something here like play a timeline
	element.innerHTML = "Correct";
} else {
	element.innerHTML = "Try Again";

(kostas) #9

yeahhhh thats exactly you are souper DBear…thanks a lot…i just coudnt write the correct var…