Home/ Questions/Q 8612241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T04:34:42+00:00

Note: Please see demo code here: http://jsfiddle.net/ginja/5yp7D/ I have a set of objects that

  • 0

Note: Please see demo code here: http://jsfiddle.net/ginja/5yp7D/

I have a set of objects that I rotate on the click of the blue square, which works fine. Each object in the set has a hover event attached that causes the object to animate a colour change and scale to give the impression of it growing and shrinking when the mouse enters and leaves. However as you can see from the demo, the scaling causes the object to reset to it’s original position and also causes an interesting effect on rotate if the object was previously hovered on.

My question is can I rotate the set of objects and still have the scale effect of the object after a rotate without it resetting to it’s original position, I assume that I have the incorrect transform in the mouseover and if someone could point me in the right direction I would be most grateful.

EDIT New fiddle link…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After some further research into this I think I understand the issue.

    When you draw a path in Raphael it is a set position on the canvas, when we perform the rotate, it is an applied transformation on top of that set position. The hover event is triggered we apply a scale transformation, which clears any previous transformations and this is why the object returns to it’s original location.

    The solution that I have come up with is when we perform the hover animation, we need to also perform any current applied rotation and when rotating we need to make sure the scaling is reset. I’ve also noticed that while the rotation is occurring, if you hover over a block, some odd animation occurs and it may be necessary to disable the hover while rotating.

    Please see the jsFiddle link http://jsfiddle.net/ginja/5yp7D/ for an updated code, below I’ve outlined my changes…

    Rotate:

    blocks.animate({ transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 1000);

    Mouse Over:

    this.animate({ fill: "#5CBFEB", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1.2" }, 200);

    Mouse Out:

    this.animate({ fill: "#cc0000", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 200);

    I’m not sure if this is the right way to do this but if anyone has anything to add or a better solution please do post a comment or answer

    • 0