Help with Responsive layout and functions


I have a layout for a responsive site.
iPhone Vertical
iPhone Horizontal
iPad vertical
iPad Horizontal.

I have a drag drop function that allows me to drag a small icon onto a spot in the layout and start a timeline.

if (event.hypeGesturePhase == "end" ){
 hypeDocument.continueTimelineNamed('ShowCard', false)

This works fine on one layout but then I need to recreate it for each layout and that seems inefficient and it also causes trouble with unique id’s for the pieces.

I am certain that this is a quick simple fix but I am having brain lock…long night building animations :wink:


Are you able to post the project…

No I can’t put the actual project but I just recreated the event in this attached document.
I think this is a bug in my other project because this works fine now.
drag grey squares to the colored rectangles


drag launch (35.3 KB)

If you give the elements a class name then you can test for that and use it.

We name the Timelines firstCall, secondCall and thirdCall ( notice the consistent camel hump syntax)
We then give each element the same class names respectively.

And in a single JS function

     var thisElement = element.className.split(" ")[1];
	if (event.hypeGesturePhase == "end" ){
	 hypeDocument.continueTimelineNamed(thisElement, false)

drag launch (40.6 KB)


Thanks Mark!!
You are the Javascript God! :wink:


You can actually change the line

var thisElement = element.className.split(" ")[1];


var thisElement = element.classList[1];