I can't use the function twice

[pisteuralpin]

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)
	);
}

[brandonmcconnell]

@pisteuralpin Could you create a reproducible example of this online (maybe codepen.io) where I can troubleshoot the issue?

[HansKing98]

You need to use a different 'name' ,
like this,

.my-typed {
	padding: 0 0 0 3px;
    background-color:blue;

	&::before { font-weight: 400; }
	@include typed(
            "Happy",
            "Angry"
        (   type: .07,pause-typed: 2,delete: .08,pause-deleted: 1),
        (   
            name: "my-typewriter-9999", 
            caret: true,caret-speed: .75,caret-width: 2px,caret-color: currentColor,caret-space: .1ch,
            delay: 1,iterations: infinite,
        )

	);
}
.my-typed2 {
	padding: 0 0 0 3px;
    background-color:blue;

	&::before { font-weight: 400; }
	@include typed(
            "Happy2",
            "Angry2"
        (   type: .07,pause-typed: 2,delete: .08,pause-deleted: 1),
        (   
            name: "my-typewriter-9999-2", 
            caret: true,caret-speed: .75,caret-width: 2px,caret-color: currentColor,caret-space: .1ch,
            delay: 1,iterations: infinite,
        )

	);
}

[brandonmcconnell]

@HansKing98

You need to use a different 'name'

Theoretically, you should be able to use this package as much as you want without ever using a name, since it should automatically iterate the index with each instance. The only caveat to this, is it likely resets between different files, so if you're using this on two different SCSS sheets, they both get pulled onto the same page, you may have conflicting names.

@pisteuralpin could you please try the suggested solution from @HansKing98 above, and let me know if it works. If it does, this might be a bug in the package I need to resolve. Let me know what you find, and maybe we can investigate this together.

[pisteuralpin]

Hey @HansKing98, thank you it seems to work.
@brandonmcconnell if you have some questions to investigate this bug don't hesitate

[brandonmcconnell]

@pisteuralpin glad it worked!

Could you drop me an email address or some other mode of contact I can reach you at, so we can set up a call to diagnose and resolve the root issue?

[brandonmcconnell]

@HansKing98 If you see the issue for why this doesn't work without naming, I would appreciate a PR as well 🙂

By default, the source surrounding $__typed-id should name each instance with an auto-incrementing id to avoid this issue. I wonder if this could break if SASS itself somehow initializes multiple times for different SASS files, which then compiles them into one file with numerous instances named the same.

@pisteuralpin, does this match your setup?

typed.css/typed.scss

Lines 362 to 368 in 57b9130

	$animation-name: "";
	@if map-get($options, name) != "" {
	$animation-name: #{map-get($options, name)};
	} @else {
	$animation-name: typed-#{$__typed-id};
	$__typed-id: $__typed-id + 1 !global;
	}

[brandonmcconnell]

I can probably replace the entire $__typed-id architecture with SASS's string.unique-id() dynamically name each unnamed instance. Instant fix.

This will be much easier to do once #22 is merged.