alexmacarthur / typeit

The most versatile JavaScript typewriter effect library on the planet.
https://typeitjs.com
GNU General Public License v3.0
3.06k stars 202 forks source link

[feature request] Set animation progress imperatively #287

Closed ysulyma closed 2 years ago

ysulyma commented 2 years ago

I'm the developer of Liqvid, a library for making interactive videos in React. I'm interested in adding an integration for TypeIt so that typing would be synced with the video (example); this would be used with the React component. Here are the things I'd need to be able to do in order to support that:

  1. pause/play a TypeIt animation that's already in-progress
  2. adjust the speed of a TypeIt animation that's already in-progress
  3. imperatively set the progress of a TypeIt animation. So e.g.
    const instance = new TypeIt("#element", {
    speed: 50
    })
    .type("Hello!")
    .set(199)

    would result in the string Hel being fully typed-out, but no further typing would happen until .go() was called.

I think I can do 1) with .freeze()/.unfreeze(). From what I can tell it is not currently possible to do 2) or 3). (I probably could by parsing your options and using the instant flag, but I don't want to put that much effort in.)

I believe @remotion-dev is also interested in this, I don't know how their internals work.

alexmacarthur commented 2 years ago

@ysulyma I'm super late getting around to this, but I love the idea of being able to arbitrarily set the progress of an animation. Due to the way TypeIt's internals are set up, I think it's possible. I'm not sure on the timeline of making it a reality, but I'm moving it to a new discussion and closing this issue for now. Future thoughts can be expressed there:

https://github.com/alexmacarthur/typeit/discussions/307