Possible to hide the carat after animation complete?

[greyskin]

Hi Brandon,

Apologies for raising an "issue" for what is essentially a question - I scoured the docs and it doesn't look like it's possible to hide the carat after the animation is complete (where the iterations parameter has been set).

Additionally I've been trying to find a way to overwrite the prefix text so I can do something like:

.typing {
    @include typed(
        " the real life",
        " just fantasy",
        1,
        (
            iterations: 1,
            prefix: "Is this",
            end-on: "Caught in a landslide, no escape from reality"
        )
    );
}

Is this stuff possible? Feel free to respond and then delete this issue since it isn't one. Sorry, I don't use GitHub much and was unsure how else to reach out to you.

[brandonmcconnell]

Hey Luke, no worries at all! Opening an issue like this is actually the perfect way to make a future recommendation. In fact, I believe there's already another issue open for hiding the carrot after the animation completes, so I should be getting to that one soon.

Could you please elaborate on your idea for overwriting the prefix? I'd like to give some more thought to how I handle that so it's the most flexible moving forward. Any ideas on what you think the ideal syntax would be? Thanks!

[greyskin]

Ah sweet! Look forward to hiding the carat! :)

I'm super new to CSS preprocessing, so not sure how much help I'll be. If it was JS I'd be looking for a callback option so that basically at the end of my animation, I can do something else. I realise there are no callbacks in CSS - I did find some info on animation-fill-mode: forwards, but I'm unsure how applicable it is in this situation.

I wonder whether a simpler option might be for the user to run another instance of typed once one is finished? Perhaps there could be an option to hide the entire element at the end of the animation and then it could be up to the user to initiate another instance on another HTML element and apply the correct delay at the start?...

So I could do something like:

.typing {
    @include typed(
        " the real life",
        1,
        (
            iterations: 1,
            prefix: "Is this",
            end-on: " just fantasy",
            hide-on-end: 1 /* potential setting */
        )
    );
}

.typing-2 {
    @include typed(
        "Caught in a landslide",
        1,
        (
            delay: 10, /* may or may not be sufficient delay - up to the user to figure it out? */
            iterations: 1,
            end-on: "No escape from reality"
        )
    );
}

The only issue I can foresee with this is that I believe the second typed instance will have a blinking carat during the beginning 10 second delay period?

[brandonmcconnell]

@greyskin So there are several pieces here

• re "the second typed instance will have a blinking carat during the beginning 10 second delay period", would you want the blinking caret to not appear until after the delay?
• re your .typing example, would hide-on-end (more likely & verbosely hide-caret-on-end), be a boolean value true/value setting or are you thinking we would need more options for that?
• re your original example from your first comment in this thread, are you asking if we can add an option to exclude the prefix from the end-on string? That one might take some more time, but I can see some value in it.

Was there anything else? 🙂

[greyskin]

would you want the blinking caret to not appear until after the delay?

Yeah in the use case I'm imagining - basically it would be nice to be able to run multiple instances of typed on different elements one after the other. (That way you can have one instance that uses a prefix, one that doesn't, etc. And it means you don't have to try to account for every possible way that people might want to use typed.) But yeah, if I had an instance of typed with a delay at the start (and another instance running in the meantime), I wouldn't want the carat of the second instance sitting there blinking. Does that help?

re your .typing example, would hide-on-end (more likely & verbosely hide-caret-on-end), be a boolean value true/value setting or are you thinking we would need more options for that?

I was actually meaning hide-on-end would hide the entire element including the carat after the animation was complete. This relates to my use case above.

re your original example from your first comment in this thread, are you asking if we can add an option to exclude the prefix from the end-on string? That one might take some more time, but I can see some value in it.

Yes, that was what I was originally suggesting, but I'm hazarding a guess it would be simpler from a development perspective to simply allow the user to hide the entire element once the animation is complete, and then if they want t run another animation on another element, they can. What do you think?