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

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

Two SUCESSIVE animations on the same element - part 2

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

Contents

  Two SUCESSIVE animations on the same element - part 2 groovee@cyberdude.com - 2019-11-14 10:52 -0800
    Re: Two SUCESSIVE animations on the same element - part 2 "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-15 09:40 +0100
    Re: Two SUCESSIVE animations on the same element - part 2 Arno Welzel <usenet@arnowelzel.de> - 2019-11-15 17:34 +0100
      Re: Two SUCESSIVE animations on the same element - part 2 Arno Welzel <usenet@arnowelzel.de> - 2019-11-15 17:42 +0100
      Re: Two SUCESSIVE animations on the same element - part 2 groovee@cyberdude.com - 2019-11-16 02:44 -0800
        Re: Two SUCESSIVE animations on the same element - part 2 Arno Welzel <usenet@arnowelzel.de> - 2019-11-16 18:18 +0100
          Re: Two SUCESSIVE animations on the same element - part 2 groovee@cyberdude.com - 2019-11-21 02:00 -0800

#37782 — Two SUCESSIVE animations on the same element - part 2

Hi,
Thanks to everyone who posted in my last thread, I decided to open a new one. I learnt new things from that one, so thanks muchly to all who posted.

THIS time, my question is: suppose I have a box which I want to SCALE down in size, say to 50% of it's size, and then move the SCALED box around the screen, say move it down - how do I do it?? :)
If I use the "animationend" property as Arno suggested last time, I don't think it will work - the box will scale down and then suddenly snap BACK to it's original size and *then* move down. So...how do I pull of what I want?


Thanx.

[toc] | [next] | [standalone]

#37786

groovee@cyberdude.com wrote on 14 Nov 2019 in comp.lang.javascript:

> Thanks to everyone who posted in my last thread, I decided to open a new
> one. I learnt new things from that one, so thanks muchly to all who
> posted. 
> 
> THIS time, my question is: suppose I have a box which I want to SCALE
> down in size, say to 50% of it's size, and then move the SCALED box
> around the screen, say move it down - how do I do it?? :) If I use the
> "animationend" property as Arno suggested last time, I don't think it
> will work - the box will scale down and then suddenly snap BACK to it's
> original size and *then* move down. So...how do I pull of what I want? 

Your assertion only applies to your [unknown] code, 
with javascript you 'pull of what you want' by writing the correct code,
with CSS only animation you are in the wrong NG.

Perhaps the answer is in forcing a reflow at the intended time.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#37789

groovee@cyberdude.com:

> Hi, Thanks to everyone who posted in my last thread, I decided to
> open a new one. I learnt new things from that one, so thanks muchly
> to all who posted.
> 
> THIS time, my question is: suppose I have a box which I want to SCALE
> down in size, say to 50% of it's size, and then move the SCALED box
> around the screen, say move it down - how do I do it?? :) If I use

By reading the documentation.

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>

Especially this:

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

> the "animationend" property as Arno suggested last time, I don't
> think it will work - the box will scale down and then suddenly snap
> BACK to it's original size and *then* move down. So...how do I pull
> of what I want?

When "snap BACK" happens, you forgot "animation-fill-mode: forwards;".
How often do I have to repeat this, before you understand it?

Please have a look at the example I already mentioned - this should
answer ALL questions:

<https://codepen.io/arnowelzel/pen/yLLqLyz>

And yes, it does not matter if you change the position or size of a box,
the principle is always the same.

-- 
Arno Welzel
https://arnowelzel.de

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

#37790

Arno Welzel:

> groovee@cyberdude.com:
> 
>> Hi, Thanks to everyone who posted in my last thread, I decided to
>> open a new one. I learnt new things from that one, so thanks muchly
>> to all who posted.
>>
>> THIS time, my question is: suppose I have a box which I want to SCALE
>> down in size, say to 50% of it's size, and then move the SCALED box
>> around the screen, say move it down - how do I do it?? :) If I use
> 
> By reading the documentation.
> 
> <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>
> 
> Especially this:
> 
> <https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode>
> 
>> the "animationend" property as Arno suggested last time, I don't
>> think it will work - the box will scale down and then suddenly snap
>> BACK to it's original size and *then* move down. So...how do I pull
>> of what I want?
> 
> When "snap BACK" happens, you forgot "animation-fill-mode: forwards;".
> How often do I have to repeat this, before you understand it?
> 
> Please have a look at the example I already mentioned - this should
> answer ALL questions:
> 
> <https://codepen.io/arnowelzel/pen/yLLqLyz>
> 
> And yes, it does not matter if you change the position or size of a box,
> the principle is always the same.

Here another CodePen with size changes:

<https://codepen.io/arnowelzel/pen/NWWEggW>



-- 
Arno Welzel
https://arnowelzel.de

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

#37798

On Friday, 15 November 2019 22:04:40 UTC+5:30, Arno Welzel  wrote:

> When "snap BACK" happens, you forgot "animation-fill-mode: forwards;".
> How often do I have to repeat this, before you understand it?

Yes I bloody READ it! (and DID it!)

Perhaps you could tell me where I'm going wrong then? :


I've got a box which I want to "go back" and start spinning around. I've got this:

.goback {
	border: #FE329A solid 5px;
	color: #FE329A;
        width: 60%;
        margin: 0 auto;
        background: pink;
        margin-top:5px;
        opacity: 0.5;
	animation-name: goback;
 	animation-duration: 1s;
	animation-timing-function: linear;
  animation-fill-mode: forwards;
	}


@keyframes goback {
  from {
	transform: perspective(200px) translateZ(0px);
  }
  to {
	transform: perspective(200px) translateZ(-200px);
  }
}





.spinclass {
	animation-name: spinit;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: #FE329A solid 5px;
	width: 60%;
        margin: 0 auto;
        background: pink;
        margin-top:5px;
	}
	
	
	
	
@keyframes spinit {
  from {
	transform: perspective(0px) translateZ(-200px) rotate3d(1,0,0,0deg);
  }
  to {
	transform: perspective(200px) translateZ(-200px) rotate3d(1,0,0,360deg);
  }
}




And then, exactly as you asked:

        box.className =  "goback";


	box.addEventListener('animationend', () => {
		
		 if (box.className == "goback") {
            box.className =  "spinclass"; }
            
            });



NOT working. (i.e. "snapping back")



...and then?

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

#37799

groovee@cyberdude.com:

> On Friday, 15 November 2019 22:04:40 UTC+5:30, Arno Welzel  wrote:
> 
>> When "snap BACK" happens, you forgot "animation-fill-mode: forwards;".
>> How often do I have to repeat this, before you understand it?
> 
> Yes I bloody READ it! (and DID it!)

But it seems you didn't understand the idea behind that.

> Perhaps you could tell me where I'm going wrong then? :
> 
> 
> I've got a box which I want to "go back" and start spinning around. I've got this:
[...]

Can you provide a complete example of what you did and not just code
snippets? Thank you.

So far I assembled your example to this:

<https://codepen.io/arnowelzel/pen/zYYMeVq>

Problem 1:

The class ".goback" has "animation-fill-mode: forwards;" but not
".spinclass". So ".spinclass" will repeat itself all the time. But
probably this is what you want anyway.

Problem 2:

The class ".goback" uses the following "to" transformation:

  transform: perspective(200px) translateZ(-200px);

However ".spinclass" starts with this:

  transform: perspective(0px) translateZ(-200px) rotate3d(1,0,0,0deg);

So ".spinclass" will reset the box to its initial perspective of 0px
instead of 200px.

The correct version would be this:

<https://codepen.io/arnowelzel/pen/RwwqdbM>

Next time please take your time and try to think a bit more logical. If
animations should follow one after another, they have to fit to each
other as well.


-- 
Arno Welzel
https://arnowelzel.de

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

#37816

> Next time please take your time and try to think a bit more logical. If
> animations should follow one after another, they have to fit to each
> other as well.


Yes Arno, that DID, indeed fix it!! :) Thank you muchly, maybe I can repay the debt sometime :)

[toc] | [prev] | [standalone]

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

csiph-web