Typed.css Versions Save

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: https://github.com/brandonmcconnell/typed.css/compare/v0.8.6...v0.8.9

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)

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)

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 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 🍻

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

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

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

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.