Как остановить/поставить на паузу typed.js?

Question

[Andrej Sharapov]

Пробую настроить бегущую строку, но не могу сделать кнопку пауза/продолжить
https://jsfiddle.net/fyx2h9uL/

Подскажите, как организовать кнопку, чтобы по клику анимация текста останавливалась (или выключалась совсем), а при повторном клике снова запускалась? Можно сделать две кнопки, если одна не получается. Сейчас пробую реализовать на инпуте.

Answer 1

[0xD34F]

<span id="typed"></span>
<div id="actions">
  <button data-action="start">play</button>
  <button data-action="stop">pause</button>
</div>

const typed = new Typed('#typed', {
  typeSpeed: 100,
  loop: true,
  strings: [
    'hello, world!!',
    'fuck the world',
    'fuck everything',
  ],
});

document.querySelector('#actions').addEventListener('click', e => {
  const { action } = e.target.dataset;
  if (action) {
    typed[action]();
  }
});

Comments

[Andrej Sharapov]

Спасибо, понял почему не работало.

Answer 2

[Виктор Л]

var typed = new Typed("#typed", {
  strings: ['Welcome to...', 'Hello!.', 'How are you?'],
  onStop: (arrayPos, self) => {
  	console.log('onStop', arrayPos, self);
  },
  onStart: (arrayPos, self) => {
  	console.log('onStart', arrayPos, self)
  }
});
var checkbox = document.querySelector("input[id=typstop]");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        // Checkbox is checked..
        typed.stop();
    } else {
        // Checkbox is not checked..
        typed.start();
    }
});

Comments

[Andrej Sharapov]

Спасибо, то что надо.

Answer 3

[Dymok]

Первый же пример
https://mattboldt.com/typed.js/

Comments

[Andrej Sharapov]

Когда я ставлю скрипт, у меня текст начинает дергаться, а кнопки все равно не работают. Подскажите, как должен выглядеть код, если я еще и кнопки заменю на инпуты?