I have been trying the typewriter animation, and it went well!

I have this Html code and I want all the animations to be played after clicking on the link :

This is my setup. I want content to be hidden just above the top, then on demand animate it to center. Obviously with following css opened class, this animation does not have desired effect (but content is centered when opened class is added).

I’ve been working on a complex animation for our company’s website, but I’m encountering a jittering issue that I can’t seem to resolve. The animation involves a combination of CSS transitions and JavaScript for controlling various interactive elements. When the animation runs, it doesn’t appear smooth and has noticeable jittering, especially on slower devices.

I’m trying to animate objects flying in from outside of a div, then one by one the objects would shrink to disappear and a different object will appear to replace the first one. The problem I’m facing is there is a weird animation happening, where it’s animating from final position, to the start position and then back to final position, weird thing is this only applies to some of the objects, so I am very confused, hope someone can point the mistakes out.

I would like to achieve a simple animation, like the one on this landing page:

The problem is that I have to create animation translation cards like in this website https://www.chrls.design/
Do you have any suggestions?