Can you animate text?

[mbritt (Michael Britt)]

Since I can't seem to figure out how to do it, am I right that you can't animate or add actions to text in Hype?

[jonathan (Jonathan Deutsch)]

I assume you are referring to letter-by-letter effects? This isn't a built-in feature of Hype presently, but it is a popular feature request.

Text elements are just like any other one, so you can animate its basic properties and add actions. So for now, you'd need to manually break apart any text to be separate elements per character and animate those. (Or depending on goals/skills, integrate Hype documents with third party libraries that can accomplish it).

[MarkHunte]

Note you can also add tags around individual innerHTML text like <span> with an id or class <span class="actionOne""> and have JS or css target the class.
And run JS to individualise text to use in some function or css animation.

Below is a proof off concept.

Static Text Actions using Javascript and CSS in Hype

[TextAnimations.hype.zip (103.8 KB)](https://youtu.be/-99DIiArOeA)

[MaxZieb (Loves Hype)]

You can also use splitting.js:

Using splitting.js in Hype

[CleanShot 2021-03-11 at 22.15.41] Animate chars using splitting.js … The animation in the example is done with CSS injected by JavaScript but could also be done with a library like anime.js … as my goal was to keep it as simple but still bound to a trigger and not dependent on CSS in head HTML, this the approach I used. Hence, there are some hints on CSS animation with JS in there too. SplittingJS.hype.zip (96,4 KB) This example just scratches the surface of animation with Splitting as it …

---

and getHypeDocument

getHypeDocument()

getHypeDocument I often read about people that need the hypeDocument context while adding code into an DIV. In Hype this context actually doesn’t know about the hypeDocument so this little helper solves that problem. The traditional approach found in the Tumult Hype docs requires hardcoding the document id. This approach makes retrieving the hypeDocument independent. [image] Installation This snippet allows you to get the context anytime. Just add it to your Head-HTML. If you can’t put this i…