Streaming live at 10am (PST)

Stop and reverse animation when drag is released

Hi there, I’ve managed to create a drag functionality on the grey-coloured text named (“Img”) using JQuery custom code, which upon dragged, activates an animation on other texts on the screen (see my link below). The destination of the drag is to the logo named “Peera”, when upon dropped, will change the background colour to black.

What I’m trying to do is when the drag is stopped halfway, that the text animations will stop and revert back to original, telling the users that the dragged element has not reached its final droppable destination. I managed to this to a certain extent if you release/stop the drag before the logo, and look at the word “Timeline”, it does revert back to the original position as this is all I’ve tested at the moment (I will do the opacity change too later on if I know how to make all this works!). As you can see, when you release the drag before the logo, the text “Img” revert back to original using jQuery UI draggable revert, and the text “Timeline” does revert back using an extra animation I created in Webflow that offsets its original animation. But the “Timeline” text reverts back only after it finishes its original animation. Is there anyway to make it so that when the dragged “Img” is released, the text animations also stop and revert back without necessarily finishing the cycle of the original animation?

Let me know if I should be sharing any specific parts of the codes (I’m no developer!).


Here is my public share link: LINK
(how to access public share link)