Draggable.create - Want show/hide toggle on certain array/endvalues

Question

I've hit a snag during a project I've been working on for quite some time. The client wants a spinnable dial on his frontpage, like a safe combination dial or a volume knob.

The knob has 4 endvalues, to which the object snaps (to the nearest value). The problem I've hit is that I have no idea how to make JS toggle a hide/show on a certain element once its corresponding value has been reached.

For instance, at 90 degrees rotation, I want element X to show. At 180 degrees rotation, I want element X to hide and Y to take its place/to show. Repeat in 90 degree increments for Z and A.

My current code attempt (amongst many) looks like this

var dialarray = [0,90,180,270]; 

var rotationSnap = 90;
Draggable.create("#Stage_Group", {
    type:"rotation", //instead of "x,y" or "top,left", we can simply do "rotation" to make the object spinnable! 
    throwProps:true, //enables kinetic-based flicking (continuation of movement, decelerating after releasing the mouse/finger)
    snap:function(endValue) { 
        //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected.
        return Math.round(endValue / rotationSnap) * rotationSnap;

if (rotation("#Stage_Group") = 90) {
    sym.$("brand_awareness").show();
} else {
    sym.$("brand_awareness").hide();
}
}
})

I'm using Greensocks, where support has been lacking to get me the right answer, so with some help from a more code-savvy friend (who didn't figure it out either) I turn to StackOverflow.

Can somebody please guide me to the solution here? It's driving me bonkers, even if it means ditching the current code for a working code will do, maybe I overlooked another, more logical solution towards making a rotatable object with triggers at certain values?

Thanks in advance!

Answer 1

This would be the code inside your snap. Updated seeing your comment

var imgRotation = Math.round(endValue / rotationSnap) * rotationSnap;
if (imgRotation == 90) {
   sym.$("id1").show();
} else if (imgRotation == 180) {
   sym.$("id2").show();
} else if (imgRotation == 270 ) {
   sym.$("id3").show();
}
else if ((imgRotation >= 360) || (imgRotation == 0)){
   sym.$("id4").show();
}
return imgRotation;