Javascript Web Animations API or CSS Animation Keyframes?

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Hey there,

I have completed the front end curriculum on free code camp and decided I want to make a portfolio so I can begin housing my work and finding some small jobs.

I wanted my page to start with a simple animation which introduces what I can do “hi, my name is Paul and I make websites” sort of thing.

In order to achieve it I thought using the Javascript Web Animations API would be a good chance to instantly demonstrate my abilities with vanilla javascript (I am making sections for demonstrating my abilities with frameworks and WordPress), however, after beginning I am noticing a few weird things happening, possibly due to my not using it properly.

In the little pen I have linked below I want the initial text Hi to fade in.
When that completes I want My name is Paul to come in from the left
When that completes I want Hi to fall down the page.

This is the opening three frames from the animation and I have got it to work using the onfinish event/promise.

However, one issue is that the final frame seems to also affect the text from the frame prior to it.

I wanted to ask if this is something that is a result of how I am using the API or if this is a bug in the API and I would be better of simply using CSS keyframes and chaining event listeners which listen for each transition to finish and then apply a specific keyframes class?

Any help would be hugely appreciated.

https://codepen.io/makingstuffs/pen/xxKVoKK

I would personally use css animation / transitions to get the desired effect. Setting a delay on the animation or transition, so when one element finishes the next one will occur.

Although I’m not familiar with any animation libraries, you can also use vanilla javascript to manipulate classes which define your transitions, by having an event listener for when the page loads, and then add / remove the transition classes dynamically with the classList.remove() and add() property.

I was beginning to think this. I wanted to use the API library as it new and I just love javascript. But I think the system of using event listeners which keep an ear out for a transitionend event will be the best way of going about it.

I know you said you have limited experience with the API but can you see anything which I have done which may be causing this effect?

If you’re sequencing things and they depend on specific staggered timings, then CSS animations are not great – this is one of the reasons the Web Animations API exists, so youre spot on with wanting to use it. I’ve only played around with it a bit, I’ll have a look at what you’ve got and see if I can see what the issue is

@DanCouper Nice one mate! I also posted this question on stackoverflow here: Javascript Web Animations API or CSS Animation Keyframes?

I was given a great in-depth response which I will share below as it will be useful for anyone else on here who may be having the same issue/questions:

1 Like

Ah, that’s a very good answer, better than I would have posted here!

1 Like

I thought it was really good too! hopefully it helps others as well

1 Like