# "Pausing" a css translate3d on hover **URL:** \ **Category:** web dev\ **Created:** [May 3, 2016, 9:16am UTC](https://forum.kirupa.com/t/pausing-a-css-translate3d-on-hover/634575 "2016-05-03T09:16:20Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![Kreataz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@Kreataz](https://forum.kirupa.com/u/Kreataz)\ **Post date:** [May 3, 2016, 9:16am UTC](https://forum.kirupa.com/t/pausing-a-css-translate3d-on-hover/634575/1 "2016-05-03T09:16:20Z")
Hello Forum, as the title says I am trying to figure out how to do something that is somehow tricky: pausing an object that is translated on it’s way with a mouseover, then would be released with the mouseout…! Simple ? Well with a css `animation` it would be by just adding a `animation-play-state: paused;` but I felt in love with the [many elements translated](https://www.kirupa.com/html5/animating_many_elements_using_transitions.htm) found in on of the Kirupa’s tutorials. Here is what I tried to do, following this tutorial: ``` theThing.addEventListener("mouseover", function () { var computedStyle = window.getComputedStyle(theThing), somePause = computedStyle.getPropertyValue('transform'); theThing.style.transform = somePause; }, false); ``` adding an eventListener in the kickOffTransitionBulle function with a mouseover as event. Well it’s not working and it seems not even aiming the bubble I hover with the mouse. I wish to be clear enough. My approach is probably not the good one, but do you think there is a way of doing such a thing? Thanks in advance. ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [May 3, 2016, 11:43am UTC](https://forum.kirupa.com/t/pausing-a-css-translate3d-on-hover/634575/2 "2016-05-03T11:43:23Z")
You can kind of do something like this, but it wouldn’t exactly be the pause you’re probably thinking about. With CSS transitions, the best kind of pause is more like: cut off the current transition before it ends, then continue by restarting your transition from your current location. If you’re mathematically inclined enough, you could _probably_ hack it to use an adjusted ease and timing that would reflect how it should react from its current pause location, but that could get potentially complex depending on the ease. Here is a codepen that might help give you an idea: > **[Pausing Transitions](https://codepen.io/Zeaklous/pen/GokAm)** > > Pausing CSS transitions using a button with pure javascript and jQuery for a CSS Trick's article... Note that when you are targeting your over object, you should use `event.currentTarget` (making sure you include `event` in you’re handler’s parameter list) ---
**Author:** ![Kreataz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@Kreataz](https://forum.kirupa.com/u/Kreataz)\ **Post date:** [May 3, 2016, 12:31pm UTC](https://forum.kirupa.com/t/pausing-a-css-translate3d-on-hover/634575/3 "2016-05-03T12:31:36Z")
> With CSS transitions, the best kind of pause is more like: cut off the > current transition before it ends, then continue by restarting your > transition from your current location. This is in fact how I would like it to work 🙂 I don’t care too much of the ease on the release. Actually I already did [an editing of this codepen](https://jsfiddle.net/7rce2hv0/1/) by changing the `margin-left` with `transform: translate3d`, closer of the [tutorial in question](https://www.kirupa.com/html5/animating_many_elements_using_transitions.htm). I thought it was working but then I didn’t have success trying to implement it in the kirupa’s code. I’m not a deep user of js so if this is too complicated I’ll have to give it up (sadly 😭) but you’re also saying there is a way of doing that, so it’s kind of frustrating…! 😫 (PS: I want to use it as menu items for my website you see? That’s why I’d need it to stop on hover) ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [May 3, 2016, 10:30pm UTC](https://forum.kirupa.com/t/pausing-a-css-translate3d-on-hover/634575/4 "2016-05-03T22:30:37Z")
You were almost there in your fiddle. All you need to do is add: ``` blueBox.style.transform = null; ``` To your ‘Play’ block. What this does is clears the `somePause` transform that is overriding the destination specified in the `someTranslate` class. ---
**Author:** ![Kreataz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@Kreataz](https://forum.kirupa.com/u/Kreataz)\ **Post date:** [May 4, 2016, 9:55am UTC](https://forum.kirupa.com/t/pausing-a-css-translate3d-on-hover/634575/5 "2016-05-04T09:55:28Z")
Hi senocular, first thank you so much for replies! Couldn’t figure this out without your explanations. So here are my adds to the kirupa’s code ~ First those two new event-listeners in the “kickOffTransition” function: ``` theThing.addEventListener("mouseover", stopTransition, false); theThing.addEventListener("mouseout", releaseTransition, false); ``` Which for each are calling those two new functions: ``` function stopTransition(e) { var theThing = e.currentTarget, computedStyle = window.getComputedStyle(theThing), somePause = computedStyle.getPropertyValue('transform'); theThing.style.transform = somePause; theThing.style.transitionProperty = 'none'; } function releaseTransition(e) { var theThing = e.currentTarget; theThing.style.transitionProperty = 'transform'; setTranslate3DTransform(theThing); } ``` and voilà, each of the bubbles stops on point with a mouseover and gets its freedom back on mouseout. 😀 🎉 ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [May 4, 2016, 12:23pm UTC](https://forum.kirupa.com/t/pausing-a-css-translate3d-on-hover/634575/6 "2016-05-04T12:23:39Z")
That’s effectively doing the same thing - just needed to get that new destination transform applied. In this example ^ that happens in `setTranslate3DTransform`. In the fiddle it wasn’t happening because the element was stuck with its pause transform which is what the `null` I suggested would have corrected. Good job figuring it out! 😃 ---
**Author:** ![Kreataz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@Kreataz](https://forum.kirupa.com/u/Kreataz)\ **Post date:** [May 4, 2016, 6:55pm UTC](https://forum.kirupa.com/t/pausing-a-css-translate3d-on-hover/634575/7 "2016-05-04T18:55:58Z")
Own you a drink on that one.