mattboldt/typed.js

Request!(Complete)

ChheavBunHeng opened this issue · 5 comments

Description

[want to display the text from user instead]

Demo

[If possible, include a demo of your issue in a fork of this JSFiddle: https://jsfiddle.net/mattboldt/1xs3LLmL/]

Steps to Reproduce

  1. [After display the animation there will be a input number or values in the box ]
  2. [After it will display the typing animation of the text that use input]

For React something like this:
import React, { useEffect } from 'react'
useEffect(() => {
const typed = new Typed(el.current, {
strings: [<div>If possible, include a demo of your issue in a fork of this JSFiddle: https://jsfiddle.net/mattboldt/1xs3LLmL/</div>, <div>After display the animation there will be a input number or values in the box </div>,<input value={'After it will display the typing animation of the text that use input'}/>,]
typeSpeed: 50,
showCursor: false
});
return () => {
typed.destroy();
};
}, [type]);

Haven't tested it😏

if it possible to implement it in vanilla js thanks 😉

<span id="element"></span>

<script src="https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js"></script>

` <script>
var typed = new Typed('#element', {

 strings: [

<div>If possible, include a demo of your issue in a fork of this JSFiddle: https://jsfiddle.net/mattboldt/1xs3LLmL/</div>, <div>After display the animation there will be a input number or values in the box </div>,<input value={'After it will display the typing animation of the text that use input'}/>,
],

  typeSpeed: 50,
});

</script>`

Haven't tested it too😏. Check out JS classes to understand how it works and ES6 modules

Thanks for answer the request!