Hello Hype Enthusiasts,
I'm excited to unveil a new extension that will supercharge your text manipulation capabilities in Tumult Hype: Meet Hype Text Split.
What Does It Solve?
Working with text in Tumult Hype has always been straightforward but somewhat limited when you need to interact with individual characters, words, or sentences. Hype Text Split expands these capabilities by breaking down text elements into their smallest components and wrapping them in HTML elements for direct manipulation through Hype's animation and interaction engines.
Technical Highlights
- DOM Traversal: It deeply traverses the DOM, so even nested elements can have their text split.
- Element Tagging: Words, characters, and sentences are wrapped in
spanelements and tagged with classes, making them directly accessible via CSS or JavaScript. - Data Attributes and CSS Variables: The extension utilizes
data-attributesand CSS variables for element indexing, which provides easy hooks for advanced functionalities.
How to Use in Tumult Hype
- Import the Extension: Include the JavaScript file in your Hype project.
- Mark Your Text: Add a
data-textsplitattribute to any text element you want to split. - Programmatic Control: You can also dynamically split text via a new Hype API method,
hypeDocument.splitText()and update elements by assigning the split result to an innerHTML of an element.
// Example: Splitting text with additional classes
hypeDocument.splitText("Hello, World!", "additional-class");
- Animation & Interaction: Once split, each word, character, and sentence becomes its own DOM element, giving you the power to apply Hype's animation and interactivity features at a granular level.
- Hype Reactive Content Compatibility : Hype Text Split is fully compatible with the Hype Reactive Content extension. To split text in elements using a variable in Hype, assign it using
data-contentwithsplitText(yourVariable)on an element to get automatic updates.
Staggered Animation with CSS Variables:
The extension's ability to add CSS variables like --char-index, --word-index, and --sentence-index allows you to control the timing of animations for a more dynamic effect. One common usage is to stagger the appearance of each character, word, or sentence.
Let's say you want to create a text animation where each character appears one after the other. You can do this by utilizing the --char-index variable to dynamically adjust the animation-delay:
.char {
opacity: 0;
animation: fadeIn 2s forwards;
animation-delay: calc(var(--char-index) * 0.1s);
}
@keyframes fadeIn {
to { opacity: 1; }
}
In this example, the first character will have an animation-delay of 0s, the second 0.1s, the third 0.2s, and so on. This is achieved through the CSS calc() function, which multiplies the --char-index variable by 0.1s.
This staggered effect adds an elegant flow to your text animations, making it more visually engaging. And all of this can be accomplished directly in Tumult Hype without requiring complex JavaScript logic.
Ah, I see. Since the extension produces span elements, using inline-block can certainly come in handy for transformations. Here's how you can explain it, formatted in Markdown:
Leveraging inline-block for Granular Transformations
When Hype Text Split wraps your text components (characters, words, or sentences) in span elements, these elements are inline by default. However, if you want to apply transformations such as scaling or rotating, the display: inline-block; property becomes particularly valuable.
The reason for this is that an element set to inline-block retains the inline element's flow characteristics while inheriting block-level styling capabilities like setting width and height. This gives you the best of both worlds: the element behaves as an inline element, but you can also apply transformations like transform: scale(1.5); to resize or transform: rotate(45deg); to rotate, without affecting the layout of surrounding elements.
By applying inline-block to the span elements generated by Hype Text Split, you can achieve fine-grained control over transformations and create more dynamic and interactive text effects.
.word {
display: inline-block;
animation: scaleDown 2s ease-in-out forwards;
}
@keyframes scaleDown {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
This way, you can individually scale, rotate, or perform any other transformation on each span, adding a whole new layer of interactivity and dynamism to your Hype projects.
Feedback & Testing
This is the first beta release, and I'm keen to have your input. Whether you find bugs, have suggestions, or want to request features, your feedback is critical for refining this tool. Check out the extension on and let me know what you think.
Thank you for your interest and engagement. I can't wait to see the amazing things you'll create with enhanced text manipulation capabilities in Hype!
HypeTextSplit.hype.zip (105,4 KB)
Preview will be published on GitHub soon.</smal