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.