DEV Community

loading...
Cover image for Create a JavaScript Kinetic Typing Animation with Scene.js

Create a JavaScript Kinetic Typing Animation with Scene.js

Daybrush (Younkue Choi)
I'm Front-End Engineer with JavaScript, CSS, TypeScript, Node.js
・2 min read

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

In this article, I want to introduce the principles of typing animation.

Typing Animation

There are three typical ways to make typing animations.

  1. JavaScript Animation
  2. CSS Animation (PC Chrome Only)
  3. 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 properties. 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.

const text = "Make a typing effect with Scene.js.";
const length = text.length;
for (let i = 0; i <= length; ++i) {
    element.innerHTML = text.substring(start, i);
}

Once you create a typing animation using Scene.js, you can write the code as follows:

Scene.typing({ text: "Make a typing effect with Scene.js." });

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.

.kinetic {
    transform: translate(20px, -40px);
    transform-origin: calc(50% - 20px) calc(50% + 40px);
}

Once you create a kinetic animation using Scene.js, you can write the code as follows:

Scene.kineticFrame({ left: "20px", top: "-40px" });

Play the above code and it will look like the following CodePen:

Kinetic Typing Animation

Finally, add typing animation in time for kinetic effect.

scene.set({
  "[data-typing='i']": Scene.typing({ text: "I ", duration: 1}),
  "[data-typing='frontend']": {
    1: Scene.typing({ text: "'m Front-End", duration: 1}),
  },
  "[data-typing='engineer']": {
    1.5: Scene.typing({ text: "Engineer", duration: 1}),
  },
  "[data-typing='with']": {
    3.3: Scene.typing({ text: "with", duration: 0.5}),
  },
  // ...
});

Finally, if you tie the typing effect to the kinetic effect, it will be as follows:

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.

If you have the features or questions you want, please register the issue or write down the questions at any time.

Thank you

Discussion (10)

Collapse
anilkulkarni87 profile image
anilkulkarni87

HI, I need some help with this. I created a .ts file with the below content

import { typing } from "@scenejs/effects";

typing({ text: "Make a typing effect with Scene.js."})
  .setDuration(7)
  .setSelector(".target")
  .play();

How do I render it?

Collapse
daybrush profile image
Daybrush (Younkue Choi) Author • Edited

You wrote in the usage of typing. Is it not working?
I think there is no element corresponding to .target.

Collapse
anilkulkarni87 profile image
anilkulkarni87

Is there an end to end tutorial of how I can render a video file out of this. Any pointers would help.

Thread Thread
daybrush profile image
Daybrush (Younkue Choi) Author
Thread Thread
anilkulkarni87 profile image
anilkulkarni87

Yes I read about render. The missing piece for me how all these components play together. Will try again and see if I can make something out of it. An end to end tutorial would help though. Thanks for taking time to respond.

Thread Thread
daybrush profile image
Daybrush (Younkue Choi) Author

Yes. The documentation is still weak. I have not been able to care much because there are many things that I am preparing now.

render helps render scenes set as global variables.

Collapse
alina2802 profile image
Alina2802

Hi, have you figured out how to export a scene to MP4 format? Can you explain to me how to do this?

Collapse
anilkulkarni87 profile image
anilkulkarni87

Nope, I haven't done it yet. Were you and to automate in browser?

Collapse
anilkulkarni87 profile image
anilkulkarni87

This is cool. Can we use other language characters other than English?

Collapse
daybrush profile image
Daybrush (Younkue Choi) Author

I haven't tried it but it seems to be.