Animation trigger by adding class

programming
1

Using Kirupa Create a Draggable element
{Create a Draggable Element in JavaScript | KIRUPA}
I would like to cause #item (red disk) to return to starting point on dragEnd
Doesn’t seem to work so I simplified function to a change of colour on button click
{https://roger-eve.w3spaces.com/Trigger-animation.html}
This doesn’t work either…
I have had similar code working elsewhere
{Create your own website | W3 Spaces}
Please lighten my darkenss
Roger

2

Hi @rogereve - welcome to the forums :slight_smile:

The main change to make is in the dragEnd event handler where you reset the offset variables back to 0 and set the position of the circle back to its original position (which is always a translate x/y value of 0):

function dragEnd(e) {
  // Reset position back to original starting point
  setTranslate(0, 0, dragItem);
  xOffset = yOffset = 0;

  active = false;
}

You can see the full source here: kirupa/examples/drag_and_return.htm at master · kirupa/kirupa · GitHub

Let me know if this unblocks you :hamburger:

Cheers,
Kirupa

3

Thanks this really helped
I discovered my problem is in understanding position, translate and specifying locations…and your nudge unblocked me…
Thanks again R

1 Like
4

Glad to hear! In creating that example, I did find some interesting challenges - namely around animating the transition as the item snaps back. You’ve inspired me to write (or record a video) about this in the near future :slight_smile:

6

Look forward to it…
Adding class to item that has an animation
then removing class (using animationend event)
Seems useful to me.