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 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.
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:
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)
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 by changing the margin-left with transform: translate3d, closer of the tutorial in question. 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)
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.
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. 
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! 
Own you a drink on that one.
