It looks like you're new here. If you want to get involved, click one of these buttons!
<div id="vader"></div> <div id="luke"></div> <<script>> var theater = theaterJS() theater .on('type:start, erase:start', function () { // add a class to actor's dom element when he starts typing/erasing var actor = theater.getCurrentActor() actor.$element.classList.add('is-typing') }) .on('type:end, erase:end', function () { // and then remove it when he's done var actor = theater.getCurrentActor() actor.$element.classList.remove('is-typing') }) theater .addActor('vader') .addActor('luke') theater .addScene('vader:Luke...', 400) .addScene('luke:What?', 400) .addScene('vader:I am', 200, '.', 200, '.', 200, '. ') .addScene('Your father!') .addScene(theater.replay) <</script>>
! function(e, t) { "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.theaterJS = t() : e.theaterJS = t() }
Comments
You will likely also have an issue with what you're attempting to do with it. You're having it look for elements which, at the time, are not yet in the page. Worse, from the API docs, I do not believe they offer a way to provide a context, allowing you to use the render buffer—meaning, the elements have to be attached to the DOM for TheaterJS to be able to work with them.
Ultimately, you're probably going to have to wrap each passage's theater code within something like the following, so that it gets executed after the elements have been added to the page: Full example: (based on yours above)