Initial value

[magnusskogen]

Is it possible to have an initial value? Let's say we start off with a sentence:

I like to drink coffee.

And then the word coffee gets erased and changed to beer.

[zhouzi]

Sure, it can be achieved by limiting TheaterJS to the word you want to change. The following should work:

<h1>I like to drink <span id="drink"></span>.</h1>

theaterJS()
	.addActor('drink')
	.addScene('drink:coffee')
	.addScene('drink:beer');

In this example, TheaterJS is only going to change the content of the span with the id "drink".

[magnusskogen]

Thanks for your reply. However I'm not sure if this answers my question? I'd like the actor drink to have an initial value, that is erased.

This would be the starting point:

<h1>I like to drink <span id="drink">coffee</span>.</h1>

And when addScene('drink:beer') is triggered, the word coffee is erased, and beer is written.

Does that make sense? Right now it seems a word has to be programmatically added to the scene before it can be erased.

[zhouzi]

Yes, your example should work. You can initialize the markup with the value you want it to have initially. Are you having any trouble with it?

[magnusskogen]

You are right, coffee is erased. Or I'd rather say it's removed. It would be nice if it was erased backwards, letter by letter.

[zhouzi]

Oh ok, I now understand what you're looking for 👍 I'm afraid that is not possible without playing with the library's internals.

Could you tell me more about your use case? Are you trying to use TheaterJS with a server-side rendered application? Knowing more about the use case could help me come up with the proper solution.