Create a JavaScript Kinetic Typing Animation
I write a post to inform you that I have added a typing effect to Scene.js
Effects library.
https://github.com/daybrush/scenejs-effects
Typing animation refers to text that flows like typing in a typewriter.
In this article, I want to introduce the principles of typing animation.
Typing Animation
There are three typical ways to make typing animations.
- JavaScript Animation
- CSS Animation (PC Chrome Only)
- SVG Animation
The animation to be described in this article is JavaScript.
Because it’s simpler than I thought.
CSS animation can also create typing animations using the before
or after
pseudo selector and content
property. However, since it is a selector that only supports PC Chrome, it is too much to use.
If your browser is PC Chrome, you will see the animation below.
Typing animation is a method of importing text sequentially into html as shown below.
you create a typing animation using Scene.js
, you can write the code as follows:
Play the above code and it will look like the following CodePen:
Kinetic Animation
In addition to typing animation, it tries to have a kinetic effect.
The kinetic effect moves the origin point in the opposite direction.
The origin point appears to be fixed but is moving.
Once you create a kinetic animation using Scene.js, you can write the code as follows:
Play the above code and it will look like the following CodePen:
Kinetic Typing Animation
Finally, add typing animation in time for kinetic effect.
Finally, if you tie the typing effect to the kinetic effect, it will be as follows:
Note:
To see more animation using Scene.js
:
Check out my projects at the following link:
https://github.com/daybrush/scenejs
https://github.com/daybrush/scenejs-effects
If you like it, press the star.
Feel free to contact me if you have any questions or requests by daybrush@gmail.com or Twitter. See you soon!
Thank you