# Animation trigger by adding class **URL:** \ **Category:** programming\ **Created:** [January 18, 2025, 11:30am UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750 "2025-01-18T11:30:33Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![rogereve](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@rogereve](https://forum.kirupa.com/u/rogereve)\ **Post date:** [January 18, 2025, 11:30am UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/1 "2025-01-18T11:30:34Z")
Using Kirupa Create a Draggable element {[Create a Draggable Element in JavaScript | KIRUPA](https://www.kirupa.com/html5/drag.htm)} 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](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](https://roger-eve.w3spaces.com/W3Borrow.html)} Please lighten my darkenss Roger ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [January 18, 2025, 7:17pm UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/2 "2025-01-18T19:17:06Z")
Hi @rogereve - welcome to the forums 🙂 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): ```auto 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](https://github.com/kirupa/kirupa/blob/master/examples/drag_and_return.htm) Let me know if this unblocks you 🍔 Cheers, Kirupa ---
**Author:** ![rogereve](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@rogereve](https://forum.kirupa.com/u/rogereve)\ **Post date:** [January 23, 2025, 1:41pm UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/3 "2025-01-23T13:41:47Z")
Thanks this really helped I discovered my problem is in understanding position, translate and specifying locations…and your nudge unblocked me… Thanks again R ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [January 25, 2025, 2:14am UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/4 "2025-01-25T02:14:13Z")
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 🙂 ---
**Author:** ![rogereve](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@rogereve](https://forum.kirupa.com/u/rogereve)\ **Post date:** [January 28, 2025, 9:29am UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/6 "2025-01-28T09:29:46Z")
Look forward to it… Adding class to item that has an animation then removing class (using animationend event) Seems useful to me. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [February 24, 2025, 11:43pm UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/8 "2025-02-24T23:43:48Z")
@rogereve - I was about to reply to your post around translate and CSS animations, but it seems like you just deleted it. Hope you were able to get your question resolved 🙂 ---
**Author:** ![rogereve](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@rogereve](https://forum.kirupa.com/u/rogereve)\ **Post date:** [February 26, 2025, 9:39am UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/9 "2025-02-26T09:39:04Z")
**Returning a dragged item to its starting point on dragEnd()** I used @keyframes to animate the return of dragItem and set coordinates for ‘to’ using CSS var()… ```auto @keyframes mymove { from {top: 0px; left:0px; } to {top: var(--top) ; left: var(--left);} } ``` This works by setting the values ```auto function myBackhome(){ r.style.setProperty('--left', 8-currentX+'px'); r.style.setProperty('--top', 8-currentY +'px'); dragItem.classList.add('myMover'); } ``` That is to say the code seems to work with the origin moved to the currentX and currentY (8px to allow for margin) and the endpoint as **negative values of current X and currentY** The question is one of understanding exactly what is going on so I know how to apply this in new situations. My ‘working’ example ([Create your own website | W3 Spaces](https://touch-drag.w3spaces.com/WorkAround.html)) _This is a replacement for my recent deleted post as I wan’t satisfied I had made myself sufficiently clear or done enough digging myself to realise I wasn’t going to ‘see why’ without advice ._ ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [February 26, 2025, 8:30pm UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/10 "2025-02-26T20:30:23Z")
Translate is always grounded to where you are starting the repositioning from (aka the origin point). You are not dealing with not an absolute position. You are dealing with relative positions. Once you have moved from your origin point, to return back to where you came from, you have to negate the values. If you moved 10 pixels to the right. To get back to the origin point, you need to move -10 pixels to the right. Does this help? ---
**Author:** ![rogereve](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@rogereve](https://forum.kirupa.com/u/rogereve)\ **Post date:** [March 6, 2025, 5:40am UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/11 "2025-03-06T05:40:58Z")
Thanks As ever clear, concise and useful. ---
**Author:** ![rogereve](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@rogereve](https://forum.kirupa.com/u/rogereve)\ **Post date:** [May 12, 2025, 2:14pm UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/12 "2025-05-12T14:14:03Z")
Having difficulty with a related problem…I want to use the (brilliant kirupa ™) draggable element code and modify to do some sorting (learning set theory). I would like to ‘drop’ the dragItem over a target element and make the dragItem a child of the target element. This works OK but add a transition and the appendChild seems to cause the dragItem to jump 500px to the right and 50px down ie by same amout as position. of target. All my reading tells me AppendChild does not affect position. Enlightenment sought from any friendly helpful soul. Sample file:[[Create your own website | W3 Spaces](https://touch-drag.w3spaces.com/append.html)] ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [May 13, 2025, 7:05pm UTC](https://forum.kirupa.com/t/animation-trigger-by-adding-class/672750/13 "2025-05-13T19:05:11Z")
When you say “Make a child of the target element”, are you modifying the DOM to change the parent/child relationship? If so, reason for this behavior is that your earlier values have a different X/Y position relative to the original parent. When the parent changes, your earlier X/Y positions need to be reset.