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.

I want to animate three strings and display the last string for a long time before re-looping. The code I currently use is:
@include typed("String1", "String2", "String3<[100]>")

Problem is that I want to display the last string even longer, but as soon as I start using longer type-pausing (for example <[150]>), save the code, reload the page, the page gets stuck on reloading. If I change the type-pausing back to 100 and reload, the page works again as before.

I'm compiling typed.scss using the jekyll-sass-converter v1.5.2 gem under Jekyll 3.8.5 (Ruby 2.7.7).

This mean's I'm compiling typed.scss using Ruby SASS 3.4. Ruby sass has been entirely deprecated since 2019, but I'd like to flag this issue anyways in case the syntax change causes any issues for DartSass or LibSass users.

I'm getting this warning that the following use of #{} syntax will be deprecated in a "future version"

DEPRECATION WARNING on line 416 of {path_to_library}/typed.scss:
#{} interpolation near operators will be simplified in a future version of Sass.
To preserve the current behavior, use quotes:

  unquote("#{str-slice($fwd-string, 1, $j)}")

DEPRECATION WARNING on line 418 of {path_to_library}/typed.scss:
#{} interpolation near operators will be simplified in a future version of Sass.
To preserve the current behavior, use quotes:

  unquote("#{str-slice($bwd-string, 1, $bwd-length - ($j - $fwd-length))}")

I copied and pasted the entire file, and there seems to be a bug on lines 88 and 97.

Here is a screenshot.

Simply wrapping those to spots in calc(), solves the issues.

Not compatible with the latest version of Sass, which is disallowing naming a function "--typed-percent-calc." It also mentions an error in the CSS code that is generated by the library, which is not a valid selector.

Hello and thank you for your work.
I can't import "typed" in my rails stylesheet application.scss => 'not found or unreadable". Any idea ?

Hi, great work. I try to use variables in my scss files for i18n purposes, but when I use var(--variable) print "var(--variable)".

Is it possible to use variables for text?

I'm using the function like this but for both the displayed text is "••••••••••••••••••••"

.windows-viewport.loaded .viewport-locked .password {
	@include typed(
		"••••••••••••••••••••",
		null,
		(delay: 2, caret-width: 2px, caret-space: 2px, iterations: 0)
	);
}

#about-presentation {
	@include typed(
		"text",
		(type: .1), (caret-width: 2px, caret-space: 2px)
	);
}

I copied typed.scss in local folder and imported it @import '../mixins/typed.scss'; in local base.scss
if we use mixin like below

@include typed("String 1", "String 2");

its throwing error:
SassError: Invalid CSS after "... 0.08, 1, 8.88,": expected selector, was '"String 1" "String ' on line 405 of styles/mixins/typed.scss, in mixin 'typed' from line 71 of styles/base/base.scss from line 3 of styles/index.scss

add feature that disables caret after string has been typed

Whenever the page I'm using the animation on is reloaded, other animations in the page started earlier than the type animation, which was like around a second before it starts. It would be nice if it starts as soon as possible.

Including a character-timed delay in an end-on string results in the code being displayed.

Example:

.test {
    @include typed(
        "Testing...",
        1,
        (
            iterations: 1,
            end-on: "one, two and... <[15]>three")
    );
}

Results in the end-on string being temporarily displayed as:

one, two and... <[15]

before the "<[15]" disappears and the correct string is displayed:

one, two and... three

I noticed an issue seemingly created by Pull Request #9 that was giving me the following sass compile error.

typed.scss:41:in 'typed': Function __div is missing argument $number2. (Sass::SyntaxError)

I believe this problem is occurring because the function implemented to divide two numbers, __div(a, b) is being called as __div(a / b) at multiple locations throughout the code.

I don't understand the LibSass / DartSass compatibility issue that makes the funciton __div() necessary in the first place, so I will not submit a pull request. I was however able to fix the compilation error and achieve a succesful typing animation when I went and replaced all instances of __div(a / b) with __div(a, b) (lines 41, 97, 145, 258).