Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Add nextStringDelay functionality #619

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

waiz3ple
Copy link

@waiz3ple waiz3ple commented Mar 3, 2025

PR Title: Add nextStringDelay Option for Smoother String Transitions in Typed.js

PR Description:

Requirements

  • Have you viewed your changes locally on the demos page, located on https://github.com/mattboldt/typed.js/blob/master/index.html?
    Yes, I’ve tested the changes locally by adding a new demo to my fork’s index.html and viewing it in Chrome and Safari.

  • If necessary, have you added a new demo to the index.html list of demos? If it's an improvement or small addition, have you added it to an existing demo on the demos page?
    I’ve added a new demo to index.html in my fork to showcase the nextStringDelay feature. The demo uses a simple loop with nextStringDelay: 1500 to demonstrate the smoother transition between strings.

  • If applicable, have you created a fork of the following JSFiddle with your branch's code and your new feature showcased?
    Yes, I’ve created a fork of the JSFiddle (https://jsfiddle.net/mattboldt/1xs3LLmL/) with my branch’s code included:

     https://jsfiddle.net/waiz3ple/o498umrk/10/
    

    The JSFiddle demonstrates the feature with nextStringDelay: 1500, showing a pause between strings in a looping animation.

Description of the Change

This PR adds a new nextStringDelay option to Typed.js, which introduces a customizable delay (in milliseconds) before typing the next string in the sequence. The feature enhances control over the animation’s pacing by allowing a pause after backspacing is completed, before typing begins again.

Key changes:

  • Added nextStringDelay to src/defaults.js with a default value of 0 (no delay).
  • Modified src/typed.js to apply the delay in the backspace method (after backspacing completes) and initFadeOut method (after fading out for fadeOut: true), using setTimeout with this.options.nextStringDelay || 0.
  • Updated src/initializer.js to include nextStringDelay in the load method for consistency with other timing options.

The implementation ensures backward compatibility—if nextStringDelay is not specified, the behavior remains unchanged (immediate typing of the next string).

Benefits

  • Smoother Transitions: Prevents abrupt switches between strings, making animations feel more polished and deliberate.
  • Enhanced Control: Gives users fine-grained control over animation timing, complementing existing options like backDelay and startDelay.
  • Better User Experience: Allows time for the audience to process each string, especially useful in looping animations or UI placeholders.
  • No Performance Impact: The delay is implemented via setTimeout, maintaining Typed.js’s lightweight performance profile.

Example usage:

new Typed("#element", {
  strings: ["First", "Second"],
  nextStringDelay: 1500, // 1.5s pause before typing the next string
  loop: true
});

Issues

  • No related GitHub issues identified for this feature.
  • Tested across browsers (Chrome, Safari, including mobile) with no regressions or performance issues.
  • One consideration: The feature assumes a delay after backspacing/fading out. If users want a delay at other points (e.g., mid-string), that would require a separate feature (not in scope here).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant