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

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

Two SUCESSIVE animations on the same element - how?

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

Contents

  Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-03 23:17 -0800
    Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-04 13:07 -0800
      Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-06 01:53 -0800
        Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-06 11:47 +0100
          Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-07 09:07 -0800
            Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-08 00:25 +0100
            Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 01:11 +0100
              Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-11 14:19 +0100
        Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-07 11:00 -0800
          Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-07 16:46 -0800
            Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-07 22:57 -0800
              Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-08 04:21 -0800
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-08 09:08 -0800
                  Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-08 10:34 -0800
                    Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 01:44 -0800
                      Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 02:02 -0800
                        Re: Two SUCESSIVE animations on the same element - how? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-11-09 11:55 +0000
                          Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:39 -0800
                  Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:32 -0800
    Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-09 05:01 -0800
      Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:45 -0800
        Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-09 09:12 -0800
          Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 13:53 -0800
            Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 00:55 +0100
              Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 19:00 -0800
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 21:09 -0800
                  Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:10 +0100
                    Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:29 +0100
                Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:35 +0100
      Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-09 09:10 -0800
    Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 00:51 +0100
      Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 01:05 +0100
        Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-12 12:00 +0100

Page 2 of 2 — ← Prev page 1 [2]

#37734

On Saturday, 9 November 2019 14:01:53 UTC+1, gro...@cyberdude.com  wrote:
> Guys, Please Stop Fighting!
> 
> This *particular example* is not the important thing here, but rather the larger
> question of *how to apply 2 different classes successively*.

Then you should explain why you would ever want to do it that way.  Technically
speaking, doing just that is a mess because there is no CSS animation-related
event that tells you when the first animation is done.  So, unless something
is supposed to happens at the midpoint, that is just not the way to go.

Moreover, it is not that difficult to restart from the given code pens and
play with the various pieces of code a little bit...  Is this another kind
of trolling test or do you actually have a requirement to implement?

Julio

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

#37736

On Saturday, November 9, 2019 at 7:45:48 AM UTC-6, Julio Di Egidio wrote:
> On Saturday, 9 November 2019 14:01:53 UTC+1, gro...@cyberdude.com  wrote:
> > Guys, Please Stop Fighting!
> > 
> > This *particular example* is not the important thing here, but rather the larger
> > question of *how to apply 2 different classes successively*.
> 
> Then you should explain why you would ever want to do it that way.  Technically
> speaking, doing just that is a mess because there is no CSS animation-related
> event that tells you when the first animation is done.  So, unless something
> is supposed to happens at the midpoint, that is just not the way to go.

<https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>

> Moreover, it is not that difficult to restart from the given code pens and
> play with the various pieces of code a little bit...  Is this another kind
> of trolling test or do you actually have a requirement to implement?

Hilarious...

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

#37737

On Saturday, 9 November 2019 18:13:01 UTC+1, Michael Haufe (TNO)  wrote:
> On Saturday, November 9, 2019 at 7:45:48 AM UTC-6, Julio Di Egidio wrote:
> > On Saturday, 9 November 2019 14:01:53 UTC+1, gro...@cyberdude.com  wrote:
> > > Guys, Please Stop Fighting!
> > > 
> > > This *particular example* is not the important thing here, but rather the larger
> > > question of *how to apply 2 different classes successively*.
> > 
> > Then you should explain why you would ever want to do it that way.  Technically
> > speaking, doing just that is a mess because there is no CSS animation-related
> > event that tells you when the first animation is done.  So, unless something
> > is supposed to happens at the midpoint, that is just not the way to go.
> 
> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>

Oh great, you did find at least that out...  Now go back and write some code
that actually works.

> > Moreover, it is not that difficult to restart from the given code pens and
> > play with the various pieces of code a little bit...  Is this another kind
> > of trolling test or do you actually have a requirement to implement?
> 
> Hilarious...

Yes, that you still do not understand the problems is hilarious.

Way to go...

Julio

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

#37739

Julio Di Egidio:

> On Saturday, 9 November 2019 18:13:01 UTC+1, Michael Haufe (TNO)  wrote:
[...]
>> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>
> 
> Oh great, you did find at least that out...  Now go back and write some code
> that actually works.

See here: <https://arnowelzel.de/samples/animation.html>

Works for me in Firefox 70.0.1 and Vivaldi 2.9.1705.41.

-- 
Arno Welzel
https://arnowelzel.de

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

#37742

On Sunday, 10 November 2019 00:55:12 UTC+1, Arno Welzel  wrote:
> Julio Di Egidio:
> > On Saturday, 9 November 2019 18:13:01 UTC+1, Michael Haufe (TNO)  wrote:
> [...]
> >> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>
> > 
> > Oh great, you did find at least that out...
> > Now go back and write some code
> > that actually works.
> 
> See here: <https://arnowelzel.de/samples/animation.html>
> 
> Works for me in Firefox 70.0.1 and Vivaldi 2.9.1705.41.

Cool, but does not work on Edge: if you won't beat me to it, I'll try and
fix it later...

Julio

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

#37743

On Sunday, 10 November 2019 04:00:32 UTC+1, Julio Di Egidio  wrote:
> On Sunday, 10 November 2019 00:55:12 UTC+1, Arno Welzel  wrote:
> > Julio Di Egidio:
> > > On Saturday, 9 November 2019 18:13:01 UTC+1, Michael Haufe (TNO)  wrote:
> > [...]
> > >> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>
> > > 
> > > Oh great, you did find at least that out...
> > > Now go back and write some code
> > > that actually works.
> > 
> > See here: <https://arnowelzel.de/samples/animation.html>
> > 
> > Works for me in Firefox 70.0.1 and Vivaldi 2.9.1705.41.
> 
> Cool, but does not work on Edge: if you won't beat me to it, I'll try and
> fix it later...

Bah, looked promising at first sight, but after looking inside I am not even
sure what you are trying to demonstrate there: indeed most of the remarks I
gave to Mr Haufe apply here as well, except that he at least gave us the
courtesy of a code pen to play with.

Anyway, I'll fix it for Edge later, which is quite an issue in itself, that
you guys just won't write code that actually works on all (major) browsers:
and, I must guess, not even see the point...

Julio

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

#37744

Julio Di Egidio:

> On Sunday, 10 November 2019 04:00:32 UTC+1, Julio Di Egidio  wrote:
>> On Sunday, 10 November 2019 00:55:12 UTC+1, Arno Welzel  wrote:
>>> Julio Di Egidio:
>>>> On Saturday, 9 November 2019 18:13:01 UTC+1, Michael Haufe (TNO)  wrote:
>>> [...]
>>>>> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>
>>>>
>>>> Oh great, you did find at least that out...
>>>> Now go back and write some code
>>>> that actually works.
>>>
>>> See here: <https://arnowelzel.de/samples/animation.html>
>>>
>>> Works for me in Firefox 70.0.1 and Vivaldi 2.9.1705.41.
>>
>> Cool, but does not work on Edge: if you won't beat me to it, I'll try and
>> fix it later...
> 
> Bah, looked promising at first sight, but after looking inside I am not even
> sure what you are trying to demonstrate there: indeed most of the remarks I
> gave to Mr Haufe apply here as well, except that he at least gave us the
> courtesy of a code pen to play with.

I tried to demonstrate how to create an animtion which moves a box and
how to implement an event handler which sets the content of the box to
"FINISHED!" when the animation is finished.

And you need code pen to modify code? Don't you have your own code pen
account? Well - here you go (slightly modified with the lower position
moved from 410px to 210px):

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

Also my second exampe with two animations where the JavaScript event
handler starts the second animation after the first has finished:

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

> Anyway, I'll fix it for Edge later, which is quite an issue in itself, that
> you guys just won't write code that actually works on all (major) browsers:
> and, I must guess, not even see the point...

If you're so brilliant then show the code for Edge.

BTW: You are aware that Edge will use Chromium in the near future?



-- 
Arno Welzel
https://arnowelzel.de

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

#37745

Arno Welzel:

> Julio Di Egidio:
> 
>> On Sunday, 10 November 2019 04:00:32 UTC+1, Julio Di Egidio  wrote:
>>> On Sunday, 10 November 2019 00:55:12 UTC+1, Arno Welzel  wrote:
>>>> Julio Di Egidio:
>>>>> On Saturday, 9 November 2019 18:13:01 UTC+1, Michael Haufe (TNO)  wrote:
>>>> [...]
>>>>>> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>
>>>>>
>>>>> Oh great, you did find at least that out...
>>>>> Now go back and write some code
>>>>> that actually works.
>>>>
>>>> See here: <https://arnowelzel.de/samples/animation.html>
>>>>
>>>> Works for me in Firefox 70.0.1 and Vivaldi 2.9.1705.41.
>>>
>>> Cool, but does not work on Edge: if you won't beat me to it, I'll try and
>>> fix it later...
>>
>> Bah, looked promising at first sight, but after looking inside I am not even
>> sure what you are trying to demonstrate there: indeed most of the remarks I
>> gave to Mr Haufe apply here as well, except that he at least gave us the
>> courtesy of a code pen to play with.
> 
> I tried to demonstrate how to create an animtion which moves a box and
> how to implement an event handler which sets the content of the box to
> "FINISHED!" when the animation is finished.
> 
> And you need code pen to modify code? Don't you have your own code pen
> account? Well - here you go (slightly modified with the lower position
> moved from 410px to 210px):
> 
> <https://codepen.io/arnowelzel/pen/BaaPaaK>
> 
> Also my second exampe with two animations where the JavaScript event
> handler starts the second animation after the first has finished:
> 
> <https://codepen.io/arnowelzel/pen/yLLqLyz>
> 
>> Anyway, I'll fix it for Edge later, which is quite an issue in itself, that
>> you guys just won't write code that actually works on all (major) browsers:
>> and, I must guess, not even see the point...
> 
> If you're so brilliant then show the code for Edge.
> 
> BTW: You are aware that Edge will use Chromium in the near future?

Ok, got it.

It seems, Edge has problem with "position: absolute" as part of the
keyframe definition. I added this to the base style of the box and just
left the positions in the keyframe definitions.

Now with three animation sections played once after another and also in
Edge:

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

All other mentioned examples are fixed as well.


-- 
Arno Welzel
https://arnowelzel.de

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

#37746

Julio Di Egidio:

> On Sunday, 10 November 2019 00:55:12 UTC+1, Arno Welzel  wrote:
>> Julio Di Egidio:
>>> On Saturday, 9 November 2019 18:13:01 UTC+1, Michael Haufe (TNO)  wrote:
>> [...]
>>>> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event>
>>>
>>> Oh great, you did find at least that out...
>>> Now go back and write some code
>>> that actually works.
>>
>> See here: <https://arnowelzel.de/samples/animation.html>
>>
>> Works for me in Firefox 70.0.1 and Vivaldi 2.9.1705.41.
> 
> Cool, but does not work on Edge: if you won't beat me to it, I'll try and
> fix it later...

Oh - and BTW:

After your "plonked" in
<673f2a74-4c4f-4050-973c-54f6673217a7@googlegroups.com> - why do you
still read my posts?

Do you know what "plonk" means? Oh now, you don't as you even don't use
a proper newsreader but only the web interface of Google Groups.

-- 
Arno Welzel
https://arnowelzel.de

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

#37735

On Thursday, November 7, 2019 at 6:46:19 PM UTC-6, Michael Haufe (TNO)
> Your "simplification" doesn't compose classes as the OP asked. Good job incorrecting me, try again.

On Friday, November 8, 2019 at 12:58:06 AM UTC-6, Julio Di Egidio wrote:
>
> I wasn't correcting you, I couldn't care less.
> 
> That said, you are simply incompetent: the job (the developer's job) is not
> to do what the OP is trying to do as he is trying to do it, the job is to
> **implement a requirement**, which in this case was "the box from here to
> there to there, and then how do I keep going without reloading the page??"
>
> [...]
> Are you trying to tell me that you cannot even read or do you actually disagree
that is the requirement?

On Friday, November 8, 2019 at 12:34:13 PM UTC-6, Michael Haufe (TNO) wrote:
>
> Unlike you, I read more than the first paragraph which included important details. Do try to keep up...

On Saturday, November 9, 2019 at 3:44:07 AM UTC-6, Julio Di Egidio wrote:
> 
> Which I take to mean "the latter".  You are totally in denial, the OP has
> even come back to you as well as to Evertroll complaining that you guys
> weren't solving the problem.  But that's just to point out your delusion,
> because I certainly don't need to defend problem vs solution, or requirements
> vs implementations, that's the fucking 101 of the discipline and you simply
> have no clue.

On Saturday, November 9, 2019 at 7:01:53 AM UTC-6, gro...@cyberdude.com wrote:
> Guys, Please Stop Fighting!
> 
> This *particular example* is not the important thing here, but rather the larger question of *how to apply 2 different classes successively*. Julio, thanks for your help, but putting a "50%" in the keyframes is Not what I'm looking for, at all.

QED.

Thank you for restating my reading of it more succinctly than before. 

While this can be accomplished, depending on how you plan to use it, you may need more and more JavaScript to coordinate the application and removal of the required classes and desired positions in which case it may be easier to just use JavaScript directly. 

The pen I put forward is (as Evertjan pointed out) incomplete. It only demonstrates as approach via `animation-fill-mode: forwards`.

Another approach is to use css transitions and have the animating classes assigned to have a higher precedent than the base element:

<https://codepen.io/mlhaufe/pen/NWWzeBJ>

Again, you'll need more JavaScript as this get extended, so perhaps some context on your larger problem would prompt a more appropriate solution. Is your project something like a menu opening or Super Mario jumping?

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

#37738

groovee@cyberdude.com:

> OK, so say I have a green box on my screen which I want to start off
> at the top left, move to the top right and THEN from there to the
> bottom right. How do I do this? (this is just an example).
You don't need JavaScript, you can just define an animation which does
multiple changes in sequence. However you can use an event listener to
do something at the end of one animation as well:

For example: <https://arnowelzel.de/samples/animation.html>


-- 
Arno Welzel
https://arnowelzel.de

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

#37740

Arno Welzel:

> groovee@cyberdude.com:
> 
>> OK, so say I have a green box on my screen which I want to start off
>> at the top left, move to the top right and THEN from there to the
>> bottom right. How do I do this? (this is just an example).
> You don't need JavaScript, you can just define an animation which does
> multiple changes in sequence. However you can use an event listener to
> do something at the end of one animation as well:
> 
> For example: <https://arnowelzel.de/samples/animation.html>

And here with change the CSS class at the end of the first animation so
a second animation will start then:

<https://arnowelzel.de/samples/animation2.html>


-- 
Arno Welzel
https://arnowelzel.de

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

#37754

On 10.11.19 01:05, Arno Welzel wrote:

> Arno Welzel:
> 
>> groovee@cyberdude.com:
>>
>>> OK, so say I have a green box on my screen which I want to start off
>>> at the top left, move to the top right and THEN from there to the
>>> bottom right. How do I do this? (this is just an example).
>> You don't need JavaScript, you can just define an animation which does
>> multiple changes in sequence. However you can use an event listener to
>> do something at the end of one animation as well:
>>
>> For example: <https://arnowelzel.de/samples/animation.html>
> 
> And here with change the CSS class at the end of the first animation so
> a second animation will start then:
> 
> <https://arnowelzel.de/samples/animation2.html>

JFTR: I updated the example to do three animations one after another and
also change the text in the box after each animation. The CodePen for
this was also updated: <https://codepen.io/arnowelzel/pen/yLLqLyz>


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [standalone]

Page 2 of 2 — ← Prev page 1 [2]

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

csiph-web