We’re excited to share news with the Hype community today: Michelangelo Agostinetto, the creator of HypeDocks, has handed over ownership of his site to Tumult. We’re honored to become its caretaker and ensure it continues to serve as an excellent showcase of incredible Hype animations.

A Labor of Love

Michelangelo discovered Hype back in 2011 at the very beginning. He’s a passionate web designer and developer who had been working with the software and designing and animating. He saw the need for a specialized website where it would be easy to discover what other designers were doing with Hype—a place to find inspiration, learn new techniques, and explore creative possibilities. That idea became HypeDocks, and it has grown into an invaluable resource for our community.

From showcasing incredible Hype documents and templates to featuring articles, tutorials, and apps built with Hype, Michelangelo has excelled in highlighting the creative talent in our community. It’s become a hub where developers can share their work, learn from each other, and push the boundaries of what’s possible with Hype.

Preserving a Wonderful Resource

While we’ll likely integrate new gallery items and updates into the Tumult Hype gallery over time, we want to preserve HypeDocks as it is—a wonderful resource to explore incredible Hype documents and the creative community behind them. The site represents years of curation and dedication, and that deserves to be maintained.

If you haven’t browsed HypeDocks yet, we encourage you to have a look around. It’s awesome. You’ll find templates, add-ons, websites, apps, infographics, educational content, and so much more—all created by talented members of the Hype community. It’s inspiring to see what’s possible when creative minds have the right tools.

Thank You, Michelangelo

We want to extend our deepest thanks to Michelangelo for being an excellent member of the community and for creating such a great home for all the incredible things you—the community—create. His dedication to building and maintaining HypeDocks over the years has enriched the Hype ecosystem and helped countless developers discover new possibilities with the software. Follow Michelangelo over on Instagram to stay up to date with his next projects.

We’re happy to share a limited time discount on all our apps from November 24th through December 2nd. Use the links below to get our apps at 30% off!

Grab a discount for:

• Tumult Hype 4 Professional 
• Tumult Hype 4 Standard 
• Tumult Whisk 2 
• Or use the code CYBERHYPERMONDAY on the Tumult Store

Tumult Hype is the best way to make animated and interactive HTML5 content.

Tumult Whisk is a live preview HTML, CSS, and JS editor and it’s the fastest way to see the effect of your code as you write it:

Both Hype and Whisk have unrestricted 2 week trials, if you need some time to explore. (But our discount code will expire soon…)

For updates on this discount, follow us at @hypeapp on X, or @hypeapp on Mastodon.

What’s new in Tumult Hype 4.1.19 – 4.1.20:

• Updated icon for macOS 26 Tahoe
• Better support for webp images
• Fixed a crash dragging keyframes
• Fixed a bug where optimizing images could result in larger sizes
• Fixed a browser-based performance issue where excess CPU can be used when looping animations
• Fixed cases of the scene editor not showing changes to/from 0 values and display visibility changes

Read the complete 4.1.20 change list here.

Tumult Hype 4.1.20 is a free update if you purchased a previous v4 version (Standard or Professional editions). Upgrade discounts are available for previous v1-v3 versions and you can read about what’s new in Tumult Hype 4.1.

v4.x.x -> v4.1.20 Upgrade Instructions:

How to upgrade the Mac App Store version:

1. Open the App Store by choosing the Apple > App Store… menu item
2. Make sure you are signed in via the Store menu
3. Click on your account on the bottom-left of the App Store window (or the Purchases tab on top if on macOS prior to 10.14)
4. If you have not already automatically upgraded, press Command-R to refresh and then click the Update button located next to Hype

How to upgrade the Tumult Store direct-download version:

1. Open the Hype 4 application
2. Choose the Hype > Check for Updates… menu item (if not automatically prompted to update)
3. Install the update and relaunch

Today, that experience may involve textbooks, videos, or if your teacher or school district has sought out additional resources: an interactive animation crafted by SERP:

SERP and their role in Curriculum Development

The SERP Institute brings together researchers, practitioners, and designers in education to improve the learning and engagement of all students while empowering both teachers and students with greater agency. Their task is huge. They achieve this by partnering with school districts to define and explore their biggest challenges; SERP then brings in researchers and designers to co-create a solution with the school district. Over 1,200 teachers and administrators have contributed to their research and design work, and their tools have reached over 40,000 registered teachers.

Hype as a Tool for Dynamic Learning

A key element of SERP’s design work involves creating engaging and interactive materials, and this is where Tumult Hype plays a significant role. I had the chance to chat with Matthew Ellinger, the Director of Design at SERP about their use of Hype. He told me they began experimenting with Hype after a designer who had just graduated from Stanford joined their team and suggested trying out a few animations in Hype as a way to move beyond static materials. Initially, Hype was used for basic math concepts, allowing for interactive demonstrations of division, for example.

This initial success paved the way for more complex animations. Artist and illustrator David Dudley joined SERP and further embraced Hype to create visually rich and interactive explanations of scientific concepts. These animations provide a level of engagement that traditional methods often struggle to achieve.

Showcasing Engaging Animations

SERP has developed a range of compelling animations using Hype. One notable project was for New York City’s Middle School Quality Initiative (MSQI), where teachers identified science concepts that were difficult to teach on paper. One such topic was on wave action, shown below:

This animation is one in a large set of interactive animations built for teaching wave energy you can check out here. These animations allowed students to dynamically explore concepts like pendulums and wave mechanics, fostering discussion and providing language for later written descriptions. Similarly, the “peppered moth” story, illustrating natural selection through changing tree colors and moth populations, is another example of a scientific concept beautifully brought to life through Hype animation.

Another fascinating example that Matthew also highlighted is the “lemonade” animation, which visually explains the phenomenon of condensation on a cold glass of lemonade. The animation meticulously shows water droplets forming and dripping on the glass, helping students understand the behavior of water molecules in a way that’s difficult to observe in a real-life experiment.

Check out a big selection of SERP’s Hype interactives at the bottom of this post.

Why Hype Works for SERP

The team at SERP reaches for Hype to convey these concepts for a number of reasons:

• Dynamic Visuals: Hype allows for the creation of much more engaging and understandable visual models compared to static alternatives.
• Student Agency: Unlike videos, Hype animations allow students to stop, start, and revisit content, fostering a sense of control over their learning. This encourages interaction and discussion among students.
• Facilitates Deeper Exploration: The interactive nature of Hype animations can inspire students to ask “what if” questions and explore the real-world phenomena being depicted.

We’re excited to stay on top of what Matthew and the team at SERP creates next! The gallery below shows off more awesome animations:

Natsuki’s project leverages the Felica reader, a contactless RFID reader, to create a unique interactive experience. By using object detection, different animations are triggered based on the object presented to the reader. This innovative approach blends Japanese tradition with modern digital storytelling.

More on this project from Natsuki:

In Japan, there is a traditional card game called Karuta, where a reader reads aloud the text on a picture card, and the players must find and take the card with the corresponding proverb or lesson. We have adapted this into a digital format, creating a digital Karuta project that brings a smile. When you hold up a Karuta card (illustration) related to the projected movie to a contactless reader, a story related to the depicted Karuta unfolds, allowing you to enjoy the narrative. All animations and scenes were created with Hype and exported to 20 HTML files. Playing through all of them takes about 30 minutes. We use a Felica reader for the device and a JavaScript module to operate it, but since it was challenging to handle the JavaScript functions within Hype, we embedded an HTML page for processing within Hype, making it work invisibly.

You may also love Natsuki’s homepage, filled with fun hand drawn animations.

You can view this project and the animation projection + interactivity in the video below:

Preview one of the animations exported from Hype:

One of the 20 animations built in Tumult Hype for this project

What’s new in Tumult Hype 4.1.15 – 4.1.18:

• Sonoma: Fixed a macOS 14.4 issue where elements may not show changes or render
• Letter and word spacing animations will be smoother
• Fixed issue where exiting a symbol may not apply changes from inspector text fields still being edited

Read the complete 4.1.18 change list here.

Tumult Hype 4.1.18 is a free update if you purchased a previous v4 version (Standard or Professional editions). Upgrade discounts are available for previous v1-v3 versions and you can read about what’s new in Tumult Hype 4.1.

v4.x.x -> v4.1.18 Upgrade Instructions:

How to upgrade the Mac App Store version:

1. Open the App Store by choosing the Apple > App Store… menu item
2. Make sure you are signed in via the Store menu
3. Click on your account on the bottom-left of the App Store window (or the Purchases tab on top if on macOS prior to 10.14)
4. If you have not already automatically upgraded, press Command-R to refresh and then click the Update button located next to Hype

How to upgrade the Tumult Store direct-download version:

1. Open the Hype 4 application
2. Choose the Hype > Check for Updates… menu item (if not automatically prompted to update)
3. Install the update and relaunch

What’s new in Tumult Hype 4.1.14:

• Added Arc to the browser preview allow list
• Sonoma: fixed some view drawing issues
• Sonoma: fixed guides and grids not showing in some situations
• Fixed a crash when hitting Original Size for a multiple selection

Read the complete 4.1.14 change list here.

Tumult Hype 4.1.14 is a free update if you purchased a previous v4 version (Standard or Professional editions). Upgrade discounts are available for previous v1-v3 versions and you can read about what’s new in Tumult Hype 4.1.

v4.x -> v4.1.14 Upgrade Instructions:

How to upgrade the Mac App Store version:

1. Open the App Store by choosing the Apple > App Store… menu item
2. Make sure you are signed in via the Store menu
3. Click on your account on the bottom-left of the App Store window (or the Purchases tab on top if on macOS prior to 10.14)
4. If you have not already automatically upgraded, press Command-R to refresh and then click the Update button located next to Hype

How to upgrade the Tumult Store direct-download version:

1. Open the Hype 4 application
2. Choose the Hype > Check for Updates… menu item (if not automatically prompted to update)
3. Install the update and relaunch

Enjoy!

Teaching ChatGPT about Hype’s JavaScript API

Max Ziebell, a Tumult Hype power user and creator of several extensions, has posted a detailed method of training the ChatGPT mind on Hype’s JavaScript API. This method allows the AI to ask difficult questions and compose code for you. Max has also provided easy-to-copy snippets for teaching the API and encouraging the use of modern JavaScript practices and correct function formatting. In addition, he has requested that the AI include comments in its code responses. Check it out!

Easing Function Conversions

There are so many ways ChatGPT may improve your life as an interaction designer, animator and programmer. One thing ChatGPT excels at is conversions: as long as it understand what format you’d like your code in and can give some guidance, the system can write code with pretty high accuracy. Let’s say I want to add a new easing function to Hype… something like EaseInOutBack, but you don’t want to use the easing animation editor, or figure out the complex mathematics. Hype’s easing function uses this format:

function (t, start, dur) {
return t / dur;
}

Where t is the current time, start is the beginning of the animation, and dur is the total time. If we check out https://easings.net, a great resource for finding a wide range of functions for easings, we see that the easeInOutBack function typically uses this format:

function easeInOutBack(x: number): number {
const c1 = 1.70158;
const c2 = c1 * 1.525;

return x < 0.5
  ? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
  : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
}

If you want to convert this to Hype format using ChatGPT, you would simply ask this question:

If you paste this selected code into Hype’s easing function editor, we get the same easeInOutBack animation:

And depending on whether you apply this to the ‘top’ or ‘left’, you’ll get something like this:

For a deeper dive into easing functions in Tumult Hype, read this post:

Converting from jQuery to Vanilla JavaScript

This example of converting an easing function to something usable in Hype’s timing function editor can extend to other useful conversions. Let’s say you wanted to use a jQuery function to select all elements with the class ‘myClass’ but want to avoid embedding the full jQuery library. Simply ask for a ‘vanilla JavaScript’ version, and ChatGPT will deliver a snippet you can paste in Hype’s JavaScript editor to run on the scene:

A learning partner

Beyond converting code for you, ChatGPT can help describe parts that you may not understand by adding code comments. If you encounter a useful code snippet on the forums or in our documentation and need help understanding and adapting it for your own purpose, ChatGPT is a great learning partner. Once you load the Hype API using Max’s instructions, you can ask it questions like the following:

The above explanation is absolutely perfect, and shows a correct knowledge of the Hype API. We hope ChatGPT helps take your animations to new and more interesting places as you leverage this tool.

What’s new in Tumult Hype 4.1.9 – 4.1.11:

• Ventura: Fixed an issue where renaming scenes would crash in Dark Mode with the Resources Panel open
• Ventura: Fixed an issue where 3D rotated elements would not show perspective
• Ventura: Fixed the Welcome to Hype window not showing video
• Fixed a bug with text elements where fonts may not be able to change with a partial selection
• Fixed issue where inspector properties being actively edited would not be shown in a previewing
• Fixed cases where resource updating could show multiple dialogs and lead to partial document corruption
• Fixed code generation issue where fonts without HTML additions would add extra lines to the document head
• The external style protection CSS updates its definition for the bold tag to be consistent with current browsers
• Fixed a bug where Standard Edition documents would reopen as read-only incorrectly

What’s new in Tumult Hype 4.1.12:

• Ventura: Fixed an issue where filter effects might not update
• Monterey: Fixed an issue with the timing function popup window not sizing correctly

Read the complete 4.1.12 change list here.

Tumult Hype 4.1.12 is a free update if you purchased a previous v4 version (Standard or Professional editions). Upgrade discounts are available for previous v1-v3 versions and you can read about what’s new in Tumult Hype 4.1.

v4.x -> v4.1.12 Upgrade Instructions:

How to upgrade the Mac App Store version:

1. Open the App Store by choosing the Apple > App Store… menu item
2. Make sure you are signed in via the Store menu
3. Click on your account on the bottom-left of the App Store window (or the Purchases tab on top if on macOS prior to 10.14)
4. If you have not already automatically upgraded, press Command-R to refresh and then click the Update button located next to Hype

How to upgrade the Tumult Store direct-download version:

1. Open the Hype 4 application
2. Choose the Hype > Check for Updates… menu item (if not automatically prompted to update)
3. Install the update and relaunch

Enjoy!

Today Apple released the macOS 12.3 update, which unfortunately removes the Python programming language from the operating system. Therefore, Export Scripts written in Python will no longer continue to run out-of-the-box.

To keep your Python-based export scripts working, Tumult is providing a custom installation of Python for you to install called the Python Export Script Enabler along with changes in the Hype v4.1.8 application to utilize it. If you use Export Scripts, you will need to:

1. Update to Tumult Hype 4.1.8
2. Download and install the PythonExportScriptEnabler.pkg

For more information about this change, please visit the Python Enabler page, or if you are an Export Script developer, please read more detailed documentation on GitHub about how this affects your users.

Tumult Hype 4.1.8 contains a few other fixes as well, and is recommended for everyone to install.

What’s new in Tumult Hype 4.1.8:

• Supports the Python Export Script Enabler to keep export scripts running since Python has been removed from macOS 12.3
• Added JavaScript event notifications for HypeEnterViewport and HypeExitViewport
• Fixed issue where Chrome would warn about navigator.userAgent deprecation

Read the complete 4.1.8 change list here.

Tumult Hype 4.1.8 is a free update if you purchased a previous v4 version (Standard or Professional editions). Upgrade discounts are available for previous v1-v3 versions and you can read about what’s new in Tumult Hype 4.1.

v4.x.x -> v4.1.8 Upgrade Instructions:

How to upgrade the Mac App Store version:

1. Open the App Store by choosing the Apple > App Store… menu item
2. Make sure you are signed in via the Store menu
3. Click on your account on the bottom-left of the App Store window (or the Purchases tab on top if on macOS prior to 10.14)
4. If you have not already automatically upgraded, press Command-R to refresh and then click the Update button located next to Hype

How to upgrade the Tumult Store direct-download version:

1. Open the Hype 4 application
2. Choose the Hype > Check for Updates… menu item (if not automatically prompted to update)
3. Install the update and relaunch

Enjoy!