v0.8.9 - Interoperability and bug fix

Fixes

• Interoperability: Make package compatible with LibSass and Dart Sass (thanks to @richardsonian for the reports and @nex3 for the suggestion that led to a viable fix that supported both engines! 💯)
  • Make package compatible with LibSass and Dart Sass in #9
    • Fixes #6
  • Explicitly quote interpolation near operators and replace slash separator with comma in #12
    • Fixes #10
    • Fixes #11
• Bug fix: Resolve bug where paused chars get rendered for the end-on string (fixes #15, thanks @greyskin for the report! 🙌🏼)
  • Character-timed delay syntax is displayed if included in end-on string #15

Full Changelog: v0.8.6...v0.8.9

v0.8.6 - Rebranding & fixes

The project has been on pause for the past month or so, but it's moving strongly once again!

With Safari Technology Preview 136 adding support for discrete animation of the content property (release notes), it's only a matter of time—likely weeks or a couple of months—until pure CSS animated text is universally supported across all modern browsers.

With this update, I wanted to make a few strides that will allow this project to become more public-ready. These updates include:

• Renaming the project Typed.css (inspired by Typed.js), formerly SCSS Typewriter
• Updating the name of this repository to typed.css, formerly scss-typewriter
• Relocating the Live Demo page to typedcss.com, formerly hosted as a pen on CodePen
• Conducting research to explore the possibility of porting this same functionality to both Less and Stylus (a future task)

v0.8.1 - Type-pausing bug fix 🪲

This release resolves a bug where the added type-pausing improvements typed the literal key of each space type fwd, bwd or both instead of the appropriate zero-width space character for each.

Updated README to include basic installation instructions. Intend to improve installation instructions at a later date.

v0.8.0 - Architecture Overhaul 🧨

v0.8.0 ushers in a MASSIVE refactorization to the original architecture. Much of the work done was purely algorithmic and will not affect the way in which users utilize the typewriter mixin— which is crazy as I've spent the past 12 hours slaving over this new version but hey, that's engineering #TheBurnoutIsReal 🥲

So what are these updates exactly? Well first off, v0.8.0 expands upon the usage of type-pausing to add support for ✨directional type-pausing✨. This change, in particular, was the main culprit that caused me to have to rework my entire build, so I've provided a retelling of my full process further down in this release note in case anyone is curious… 👋🏼

v0.8.0 Updates

Improvements 🛠️

• ability to enable/disable type-pausing via a boolean type-pausing property in the $options map object
• directional type-pausing support with new syntax for forward/backward/both-direction(s), use: <[_10]>, <[10_]>, <[_10_]> where <[10]> without an underscore pauses on forward only by default, though this is configurable using an additionally added type-pausing-default property on the $options map object
• a new styles property on the $options map object which adds global styles that will apply to all strings in the animation
• a new end-styles property on the $options map object which adds styles that will apply to only the very last frame of the end-on string when the animation is not set to loop continuously
• a new prefix property on the $options map object which adds a prefix to the beginning of each string in the animation— caution: this prefix will adopt per-string styles, per-string, so the style may suddenly shift in undesirable ways.

Bug Fixes 🐛

• extended the application of string styles through the pause between strings so there is no unstyled lull where the styles from one string start to transition to the styles of the next
• tons of clean-up of old code to build a new system of managing the string animation sequence; it's much more functional-oriented now

---

The MASSIVE logic overhaul, a detailed retelling

• It would be nice if I could pause mid-string for dramatic effect.
• Maybe I could achieve that by passing an array of strings with a before/after-timing property attached to each.
• ^No, way too complicated and no one will use that.
• Does typed.js do anything like this, and if so, how? ¯_(ツ)_/¯
• They do! Using a special syntax like Some text^1000 and some more text where every time a number follows a caret symbol mid-string, the animation will pause for that many milliseconds while animating forward.
• What are some creative ways I can engineer these strings to pause mid-string?
• 💡 ZERO-WIDTH SPACES
• I need some sort of special syntax. After exploring a few options, I settled on <[INTEGER]> to avoid any conflicts with other modules and packages that use a structure more similar to %{…} or ${…}.
• Build a function to convert these "smart expressions" into zero-width spaces ✅
• Houston, we have a problem… adding zero-width spaces not only pauses the animation animating forward but backward as well. Far from ideal.
• It's okay, I'll solve that in a later update! …no you won't, Brandon— do it now.
• Reconstructed the mixin's logic to strip out all the spaces on the backward-direction pauses, so the animation only pauses on spaces moving forward. This one was a doozy and required changing a bunch of the magical math.
• Okay, done… but what if someone ever wanted the pause to work in the backward direction as well, or both?! Oh boy…
• 2 hours of mind-numbing picking and prodding at my 2-year-old implementation of the first conceptualization of this idea later
• Ripped all the guts out of my logic and rebuilt a good portion of it from scratch. Tedious but well worth it.
• Develop a new special syntax for different directional pauses. How do we achieve this? 💡 OTHER zero-width spaces (thank goodness Unicode supports a variety of zero-width options)
• The new special syntax is decided. It allows adding a single underscore _ before or after the number within the original syntax, representing animating in the forward direction (_ on the left side) or animating in the backward direction (_ on the right side), OR one underscore on each side to support pausing in both directions. A few examples of this would be: <[_10]>, <[10_]>, <[_10_]>
• Most people won't care about or need directional pausing and will be fine with only pausing in the forward direction, so I default to that forward mode by default, so when no underscores are present, pausing—by default—will only occur in the forward direction.
• Just in case someone prefers a different default such as backward or both directions, I added an additional setting in the $options map object type-pausing-default with accepted values fwd (default), bwd, and both. I've also added another boolean option type-pausing to allow users to determine whether they want to enable type-pausing at all. It is enabled by default.

---

Judging by GitHub's recommendation for semantic versioning, this package should really be somewhere between v1 and v2 already, but what's the fun in rushing version numbers when I haven't even officially published this yet? 🤷🏻‍♂️

Cheers 🍻

v0.5.1 - Bug fixes 🪲

Just pushing a quick fix for a bug that occurred with the v0.5.0 push 👋🏼

v0.5.0 - Prefix and Type-Pausing

SCSS Typewriter has been making some huge strides for the past 48 hours, so I'm finally bumping up the version number to reflect the immense amount of progress that has been made.

This update specifically brings two great new updates:

• type-pausing: (boolean) This boolean value determines whether the current typewriter will replace any/all instances of the special "pause" syntax within its strings with a pause for the duration of however long it would take to type the number of characters indicated by its contained value. This property is set to true by default. The type-pause syntax is <[INTEGER]>. When enabled, a given string Be right <[3]>there. the total time it would take to animate the string forward would be the current type speed duration * 18. The 18 character-durations is comprised of three parts: Be right (9 chars), <[3]> (same time as 3 chars), and there. (6 chars). 9+3+6=18
• prefix: (string) This string will displays at the beginning of each typed string and will NOT be included in the animation of the text itself. It's important to note that if you set per-string styles, they cause undesirable effects to the prefix, causing its style to change instantly between strings. In this case, opt to place any prefix/suffix strings outside the animated text element altogether.

Still a ways to go before we reach v1.0.0, but I have a laundry list of improvements to make which should get me there soon. I'm shooting for end of next week! 🎉

Coming soon…

• bulk-typing, the ability to chunk more than single characters together for times you may want to print an entire string or a portion of a string together
• styles, global styles that apply to all strings including end-on
• freeze-end, ability to freeze animation at the end of the final iteration without relying on end-on
• animation-stack, ability to pass in animation strings to stack atop computed typewriter animation property value
• Bug fix: Carrying styles through keyframes in-between strings to avoid CSS blending styles between strings
• Better usage documentation
• Fully functional demos page

v0.1.5 - Accessibility bug resolved

This update addresses the accessibility-related issue that arose when adding support for alt text. The bug is now resolved.

v0.1.3 - Additional accessibility-focused support

This update continues the work set forth by v0.1.0 and v0.1.1 and adds additional accessibility-focused support for alt text by adding an alt-text property to the $options map object for explicit definition. When unset, this property will—by default—fall back to the value stored in end-on. If end-on is also unset, both values will default to the value of the first string passed to the typewriter mixin.

This release also works to further investigate a solution for the bug encountered by nesting @support at-rule queries under @keyframes in v0.1.0. As a fallback, an update from v0.1.1 removes the @support queries and instead stacks the values in order, in hopes that an invalid content value will fall back to the previous-adjacent content property value.

This is not yet confirmed.

v0.1.0 - Accessibility update

This update brings out-of-the-box native support for pseudo-element alt text as well as several rendering improvements.

Because pseudo-element alt-text is very bleeding at present, the alt text is added via a mixin that accounts for differing browser specs for pseudo alt text via @support at-rule queries:

Alt-Text Mixin - Logic

@mixin __typewriter-alt-text($string, $alt-text) {
	@supports (content: "x" / "y") {
		content: $string / "#{$alt-text}";
	}
	@supports not (content: "x" / "y") {
		content: $string;
		alt: "#{$alt-text}";
	}
}

Alt-Text Mixin - Usage Example

@include __typewriter-alt-text($animating-text, $static-alt-text);

For better property-specific fallback values between string animations, the default style fallback value has been updated from initial to unset.

To allow text to wrap both early when using \A or when the text surpasses the edge of its container, the white-space property has been updated from pre to break-spaces.

v0.0.7 - The BIG "styles" update 🤯

v0.0.2 brought with it many great updates to the scss-typewriter base, adding support for the new end-on options property, which brought with it the new default functionality for ending the animation on the first string (if another is not set using on-end) after all interactions are complete, when iterations is set to any finite and in-range integer value.

v0.0.7 brings substantially more upgrades that were on the to-do list to make the package even more flexible. These include:

• added support for number type in place of $speed object. This $speed object argument traditionally only accepted either a list of the speed values to use, a key-value map of which speed values to replace, or null to use the default speed values. With this update, when a positive non-zero number (integer or float) is passed in place of the $speeds object, it acts as a multiplier for the default speeds, so passing a value of 0.5 would reduce the animation speed by half, while passing a value of 2 would double the speed of the animation.
• added properties for itemized caret styles on the options object. Styling the caret with custom CSS or SCSS has always been possible for a developer by targeting the &::after pseudo-element they are calling @include typewriter() on, though some of the changes are not as simple as changing a single setting, many of these properties such as the caret-color and caret-width for example are consolidated into the border-right CSS property. Customizing the caret via &::after is still possible and uses the same logic as before, and it encouraged, but this provides a simpler way to adjust key styles for the caret within the options object. These include:
  • caret-speed (already exists): (number) This is the duration of one "blink" animation (in seconds) of the insertion cursor/caret when it has been enabled using the caret property. Like the $speed object values, these number values do not accept units.
  • caret-width: (number) This is the width of the caret. By default, it is set to a value of 1ch (or the width of the character "0" in the current font). By their nature, ch units are ideal for this use-case, but any non-percent numeric units may be used (e.g. ch, ex, px, em, rem, vw, vh, etc.).
  • caret-color: (number) This is the color of the caret. By default this color is inherited from the current text color of the parent element using currentColor, but this can be set to any valid color value (e.g. hex, rgb, rgba, hsl, hsla, lab, lch, etc.).
  • caret-space: (number) This is the width of the caret. By default, it is set to a value of .1ch (or 10% of the width of the character "0" in the current font). By their nature, ch units are ideal for this use-case, but any non-percent numeric units may be used (e.g. ch, ex, px, em, rem, vw, vh, etc.).
• added support per-string styles. This is by far the BIGGEST update arriving in v0.0.7. By default, simple use of typewriter requires only a variable number of string arguments without any special syntax, none of which need to be wrapped in a list or map of any sort. The typewriter mixin intelligently determines where $strings ends and where the $speeds and $options objects begin. This still works as it always has, though this update now provides a more sophisticated method for declaring your strings which allows for custom CSS or SCSS styling on each. If you want to take advantage of the per-string styling, wrap all of your strings into a single map, with the strings as stringed-keys, and the styles for each as a map of its own. If you don't want to define custom styles for each string, you can simply use an empty map () for the strings which do not need custom styles. As the SCSS is computed, the typewriter mixin compares each string's styles with the total list of properties across all strings provided and resets unused properties back to initial when not in use. This prevents the @keyframes from starting to render frames blending into an upcoming frame by keeping the styles for each string isolated. This same new feature also works out-of-the-box for the on-end string. Here is an example making use of both:

@include typewriter(
    (
        "#1 String": (
            font-family: ("Times New Roman", arial),
            color: blue
        ),
        "#2 String": (
            font-family: (consolas, monospace),
            font-weight: 700,
            background-color: #000,
            color: #0f0
        ),
        "#3 String": ()
    ), [.04, null, .01], (
        iterations: 2,
        end-on: ("#4 String - Ending": (
            background: #fff linear-gradient(to right, cyan, yellow),
            background-blend-mode: hard-light,
            color: red,
            font-size: 120%
        )),
        caret-speed: .65,
        caret-width: 2px,
        caret-color: orange,
        caret-space: 1px
    )
);