Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38475 > unrolled thread

reset animation

Back to article view | Back to comp.lang.javascript

Contents

  reset animation Andrew Poulos <ap_prog@hotmail.com> - 2020-06-25 15:50 +1000
    Re: reset animation Andrew Poulos <ap_prog@hotmail.com> - 2020-06-25 17:13 +1000
    Re: reset animation "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-06-25 01:15 -0700
      Re: reset animation Andrew Poulos <ap_prog@hotmail.com> - 2020-06-25 19:08 +1000
        Re: reset animation "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-06-25 11:15 -0700

#38475 — reset animation

I have an img which, on hover, some CSS animates

     @keyframes pan {
       0% {
         transform: translate(0, 0);
       }
       25% {...
     }

When the mouse move out I need the img to smoothly move back to its 
initial position. I've tried various things to no avail. The latest I 
tried is this:

document.querySelector('img'.addEventListener('mouseout', ev => {
   ev.target.style.animationPlayState = "paused";

   let elem = window.getComputedStyle(ev.target, null);
   ev.target.style.transform = elem.getPropertyValue("transform");
   ev.target.style.animation = "none";

   ev.target.style.transition = "all 1s";
   ev.target.style.transform  = "translate(0, 0)";
});

but the img snaps back to it's initial position. How can I get this to 
smoothly return the img to it's initial position?

Andrew Poulos

[toc] | [next] | [standalone]

#38476

On 25/06/2020 3:50 pm, Andrew Poulos wrote:
> I have an img which, on hover, some CSS animates
> 
>      @keyframes pan {
>        0% {
>          transform: translate(0, 0);
>        }
>        25% {...
>      }
> 
> When the mouse move out I need the img to smoothly move back to its 
> initial position. I've tried various things to no avail. The latest I 
> tried is this:
> 
> document.querySelector('img'.addEventListener('mouseout', ev => {
>    ev.target.style.animationPlayState = "paused";
> 
>    let elem = window.getComputedStyle(ev.target, null);
>    ev.target.style.transform = elem.getPropertyValue("transform");
>    ev.target.style.animation = "none";
> 
>    ev.target.style.transition = "all 1s";
>    ev.target.style.transform  = "translate(0, 0)";
> });
> 
> but the img snaps back to it's initial position. How can I get this to 
> smoothly return the img to it's initial position?

I've gotten pretty close by taking the 0% from the @keyframes, removing 
the :hover, adding this @keyframes to the CSS

@keyframes panReset {
  100% {
    transform: scale(2) translate(0, 0);
   }
}

and changing the js to this

let i = document.querySelector('img');

i.addEventListener('mouseover', ev  => {
   ev.target.style.animationPlayState = "paused";
   ev.target.style.animation = "none";
   ev.target.style.animation = "10s ease-in 0s infinite forwards pan";
});
i.addEventListener('mouseout', ev => {
   ev.target.style.animationPlayState = "paused";
   let elem = window.getComputedStyle(ev.target, null);
   ev.target.style.transform = elem.getPropertyValue("transform");
   ev.target.style.animation = "none";
   ev.target.style.animation = "0.6s ease-in 0s 1 forwards panReset";
});
i.addEventListener('animationend', ev => {
   let elem = window.getComputedStyle(ev.target, null);
   ev.target.style.transform = elem.getPropertyValue("transform");
});


Would've been nice if there was a way to say "run the animation in 
opposite direction to the way it's currently running, from it's current 
position, back to its start".

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#38477

On Thursday, June 25, 2020 at 12:51:08 AM UTC-5, Andrew Poulos wrote:
> I have an img which, on hover, some CSS animates
> 
>      @keyframes pan {
>        0% {
>          transform: translate(0, 0);
>        }
>        25% {...
>      }
> 
> When the mouse move out I need the img to smoothly move back to its 
> initial position. I've tried various things to no avail. The latest I 
> tried is this:
> 
> document.querySelector('img'.addEventListener('mouseout', ev => {
>    ev.target.style.animationPlayState = "paused";
> 
>    let elem = window.getComputedStyle(ev.target, null);
>    ev.target.style.transform = elem.getPropertyValue("transform");
>    ev.target.style.animation = "none";
> 
>    ev.target.style.transition = "all 1s";
>    ev.target.style.transform  = "translate(0, 0)";
> });
> 
> but the img snaps back to it's initial position. How can I get this to 
> smoothly return the img to it's initial position?
> 

For this use case I think a css transition will be far simpler:

<https://developer.mozilla.org/en-US/docs/Web/CSS/transition>
<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions>

Notice the `ease-in-out` option,

[toc] | [prev] | [next] | [standalone]

#38478

On 25/06/2020 6:15 pm, Michael Haufe (TNO) wrote:
> On Thursday, June 25, 2020 at 12:51:08 AM UTC-5, Andrew Poulos wrote:
>> I have an img which, on hover, some CSS animates
>>
>>       @keyframes pan {
>>         0% {
>>           transform: translate(0, 0);
>>         }
>>         25% {...
>>       }
>>
>> When the mouse move out I need the img to smoothly move back to its
>> initial position. I've tried various things to no avail. The latest I
>> tried is this:
>>
>> document.querySelector('img'.addEventListener('mouseout', ev => {
>>     ev.target.style.animationPlayState = "paused";
>>
>>     let elem = window.getComputedStyle(ev.target, null);
>>     ev.target.style.transform = elem.getPropertyValue("transform");
>>     ev.target.style.animation = "none";
>>
>>     ev.target.style.transition = "all 1s";
>>     ev.target.style.transform  = "translate(0, 0)";
>> });
>>
>> but the img snaps back to it's initial position. How can I get this to
>> smoothly return the img to it's initial position?
>>
> 
> For this use case I think a css transition will be far simpler:
> 
> <https://developer.mozilla.org/en-US/docs/Web/CSS/transition>
> <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions>
> 
> Notice the `ease-in-out` option,

It's not as simple a transform as I've indicated. The translation is to 
a number of points and there's a clip-path that changes as at each 
point. Having said that I'll still have a go at doing it with multiple 
linked transitions.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#38479

On Thursday, June 25, 2020 at 4:08:57 AM UTC-5, Andrew Poulos wrote:

> It's not as simple a transform as I've indicated. The translation is to 
> a number of points and there's a clip-path that changes as at each 
> point. Having said that I'll still have a go at doing it with multiple 
> linked transitions.


Stick with what you have then, and see if you can make use of:

animation-timing-function: ease-in-out;

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web