A fully functional and flexible typewriter mixin for SCSS, with Less and Stylus support coming soon! Typed.css supports multiple strings, multi-line strings, variable speeds, per-string styling, animated caret (blinking insertion cursor), directional type-pausing, and much more. It's even accessible! ✨
CC0-1.0 License
Bot releases are visible (Hide)
Published by brandonmcconnell over 1 year ago
end-on
string (fixes #15, thanks @greyskin for the report! 🙌🏼)
Full Changelog: https://github.com/brandonmcconnell/typed.css/compare/v0.8.6...v0.8.9
Published by brandonmcconnell over 1 year ago
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:
typed.css
, formerly scss-typewriter
Published by brandonmcconnell almost 3 years ago
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.
Published by brandonmcconnell almost 3 years ago
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… 👋🏼
type-pausing
property in the $options
map object<[_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 objectstyles
property on the $options
map object which adds global styles that will apply to all strings in the animationend-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 continuouslyprefix
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.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.<[INTEGER]>
to avoid any conflicts with other modules and packages that use a structure more similar to %{…}
or ${…}
._
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_]>
$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 🍻
Published by brandonmcconnell almost 3 years ago
Just pushing a quick fix for a bug that occurred with the v0.5.0 push 👋🏼
Published by brandonmcconnell almost 3 years ago
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=18prefix
: (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 togetherstyles
, 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 valuePublished by brandonmcconnell almost 3 years ago
This update addresses the accessibility-related issue that arose when adding support for alt text. The bug is now resolved.
Published by brandonmcconnell almost 3 years ago
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.
Published by brandonmcconnell almost 3 years ago
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
.
Published by brandonmcconnell almost 3 years ago
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:
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.&::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.).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
)
);
Published by brandonmcconnell about 3 years ago
In this release, scss-typewriter now supports a new config property on the $options
map object called end-on
.
This property is available for use ONLY when iterations
is set to a finite number. Once the final iteration completes, the animation will type one final string and keep that string present, thereby concluding the animation. This property can be passed either any custom non-empty string or the nth-index of the string from the $strings
list to use ranging from 1 to N, where N represents the total number of strings being used.
By default, if a finite value is set for the iterations
property and end-on
is not set, the first string from the $strings
list will be re-typed once all prescribed iterations are complete. This is handled via a separate animation that is delayed for the total duration + delay of the first animation.
Using this end-on
property—like using the iterations
property—has no bearing on the caret
animation, which, if enabled, will continue to animate perpetually even after the text animation concludes— just like our galaxy, spinning long after we're gone 🌌
Published by brandonmcconnell about 3 years ago
This is the first mostly-stable release of scss-typewriter. 🎉
Use (and enjoy) with caution. If you encounter any bugs, please report them in the Issues tab, and I'll resolve them as quickly as I can.