Skip to content

Instantly share code, notes, and snippets.

@escapeboy
Created July 18, 2020 18:43
Show Gist options
  • Save escapeboy/d10d3da633a26c64732effac1cf97e62 to your computer and use it in GitHub Desktop.
Save escapeboy/d10d3da633a26c64732effac1cf97e62 to your computer and use it in GitHub Desktop.
Simple animated input typewriter
let speed = 100;
let input = document.getElementById('searchInput');
let i = 0;
let j = 0;
let texts = [
'Macbook Pro',
'iPhone 11 Pro',
'lorem ipsum im silor daler ipsilom'
];
let text = texts[j];
const typeWriter = function(){
return new Promise((resolve, reject) => {
let wait = setTimeout(() => {
clearTimeout(wait);
let content = input.getAttribute('placeholder') + text.charAt(i);
input.setAttribute('placeholder', content);
i++;
}, speed)
return resolve();
});
}
function init(){
if(j === texts.length) j = 0;
text = texts[j];
input.setAttribute('placeholder', '');
i = 0;
j++;
let writeInterval = setInterval(() => {
if(input === document.activeElement){
i = 0;
input.setAttribute('placeholder', '');
return;
}
typeWriter().then(() => {
if(i===text.length){
setTimeout(() => {
clearInterval(writeInterval);
init();
}, 1000)
}
});
}, speed)
}
init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment