Hype Text Path (extension version with live preview in IDE)

[MaxZieb (Loves Hype)]

Hype Text Path

A small custom-tailored extension to animate text along a path in Tumult Hype.

How to Use the Hype Text Path

Introduction

The Hype TextPath Extension allows you to animate text along a path in Tumult Hype. This guide will help you set it up in your project, ensuring smooth integration and usage.

Steps to Get Started

1. Download the Extension

You can include the Hype TextPath Extension by either linking it via CDN or downloading it from the GitHub repository.

Option A: Content Delivery Network (CDN)

The latest version can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeTextPath/HypeTextPath.min.js"></script>

Option B: Download from GitHub

1. Go to the Hype TextPath Extension GitHub Repository.
2. Download the latest version of HypeTextPath.js or HypeTextPath.min.js.
3. Place the downloaded HypeTextPath.js or HypeTextPath.min.js file in your Hype project's resources folder.

2. Include the Script in Your Project

Add the script reference to your Hype document’s head section.

1. If using CDN:

   • Go to the Document Inspector and add the script reference in the Head HTML section.

   <script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeTextPath/HypeTextPath.min.js"></script>
   

2. If using downloaded file:

   • Drag the HypeTextPath.js or HypeTextPath.min.js file into your project's Resources folder. Hype will automatically link it in the Head HTML.

3. Set Up Data Attributes

To animate text along a path, you need to set up specific data attributes in your Hype elements.

1. Create a Path:

   • Use the Vector Tool to draw your path.
   • Select the path, go to the Identity Inspector, and add the following data attribute:

   Key	Value
   data-text-path	textPath1

2. Create Text:

   • Use the Text Tool to create your text element.
   • Enter the text you want to animate along the path.
   • Select the text element, go to the Identity Inspector, and add the following data attribute:

   Key	Value
   data-text-content	textPath1

The value must match, but can be anything you like

Conclusion

You are now set up to use the Hype TextPath Extension in your Tumult Hype projects. Follow the steps above to integrate and start animating text along paths effortlessly. For more details and updates, always refer to the GitHub repository.

Happy animating!

Additional Resources

Content Delivery Network (CDN)

The latest version of the Hype TextPath Extension can be linked into your project using the following script in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeTextPath/HypeTextPath.min.js"></script>

Optionally, you can also link a specific release or a version with SRI. For more details, visit the JsDelivr (CDN) page for this extension.

Learn how to use the latest extension version and how to combine extensions into one file at HypeCookBook - Including external files and Hype extensions.

---

Demo:

Code on GitHub:

GitHub - worldoptimizer/HypeTextPath: Great engaging text path animations in...

Testfile:
HypeTextPath.hype.zip (110,3 KB)

Feedback is welcome!

---

Older version this is based on:

Hype TextPath (text on path animation)

Hype TextPath (Beta) [image] Animated demo here So as we now have path information in Hype we can manipulate… how about using that for a nice text path animation. Assign a class that starts with textPath to your vector path and assign the same class to your text with the addition content. So for example assign to your first path the class textPathOne and to the corresponding text the class textPathOne content. Use the line animation to move the text along the line. That’s it. Put this code s…

[MaxZieb (Loves Hype)]

↑ look at project
1.1.2 Added global observer for style changes
1.1.3 Improved cleanup and fixed attribute handling

[jonathan (Jonathan Deutsch)]

Very nice!

I did a test and noticed it doesn't handle bold, italic, or underline which is are common stylings in Hype's Typography Inspector.

I tried adding 'fontWeight', 'fontStyle', 'textDecoration', to your transferStyles() function and it seemed to work in basic testing (in fact the changes are instantaneous, which is tres cool!). Is this something you can add or are there specific reasons you noticed they should be avoided?

[MaxZieb (Loves Hype)]

↑ look at project
1.1.4 Added fontWeight, fontStyle, textDecoration to transferStyles as suggested by Jonathan

No… it was just an oversight! Thanks, @jonathan!

[Daniel]

Fun to play with

[MaxZieb (Loves Hype)]

Nice! When you animate the "Line Draw," it should move along the path.