타이밍 애니메이션 Typewriter-effect 예제

타이핑 애니메이션 

화면에서 글자를 보여줘야 하는데 타이핑되는 애니메이션이 필요한 경우가 종종 있다. 이 때 쓰기 좋은 라이브러리가 typewriter-effect이다. 아래 npm에 예제도 굉장히 설명이 잘 되어 있어서 쓰기가 쉽다.

 

https://www.npmjs.com/package/typewriter-effect

typewriter-effect

기본 예제

 

글씨가 적힌 다음에 잠깐 쉬거나, 다시 글자를 지우거나 하는 효과를 chain 형태로 엮어서 사용할 수 있다.

 

import Typewriter from 'typewriter-effect'

<Typewriter
onInit={(typewriter) => {
	typewriter
	.typeString('안녕하세요')
	.pauseFor(100)
	.typeString('<br/>어쩌다개발자')
	.pauseFor(100)
	.typeString('<br/>세리둥절입니다')
	.start()
	.pauseFor(100)
	.callFunction(function (state) {
		state.elements.cursor.style.display = 'none'
	})
}}

 

깜빡이는 커서 없애기

 

위의 예제에서 대부분 직관적으로 알 수 있는 예제들만 사용했는데, 모든 글자가 다 적혀지고 나서 1초 후에 깜빡이는 커서를 함수를 통해서 없앨 수 있다.

.callFunction(function (state) {
		state.elements.cursor.style.display = 'none'
	})