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.

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.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.

We’ve just discovered a new place to quickly host your Tumult Hype animations. It’s called https://tiiny.host, and makes uploading your Hype exports to the web super easy. Get your animations on tiiny.host by just dragging over a zip file:

1. Select File > Export as HTML5 > Folder
2. Select your exported .html document and .hyperesources folder, right click, and select compress to add it to a zip file
3. Upload your zip file to tiiny.host.
4. Once uploaded you can choose your custom domain name, or use the built in tiiny.host domain.

Here’s how it works:

This will generate a unique HTML page (or custom domain, if you’d like). The service is hosted on Amazon’s CDN, is free to try for a week, but is $10/month for 5 sites.

For additional exporting guides, visit this page.

Drama in Panama came to life from hundreds of hours of filming, writing, rewriting, and then carefully bringing the story into an innovative self-paced interactive web format in Tumult Hype.

Daniel Morgan @ Tumult: From what I gather, this was a nine year project! Tell me a little bit about how you started planning / writing this, and what story you set out to tell.

Deyan Sedlarski: It all started as a joke when we were students. We studied at the National Academy of Art in Sofia, Bulgaria, where we were tasked with making a comics based on a book by Jack London – The Hearts of Three. Our passion for cinema led us to film this book, but we had never done anything like this. Maybe being naive didn’t stop us in time. With tools and equipment at hand, we set out on this adventurous path. We went through many stages. Many people in the team changed. We made it to the final cut several times, but the results were not satisfying and it made us start all over again. Ivo Alekseev wrote five versions of the script and in the end we had a wonderful story. It’s only inspired by the book, we didn’t literally follow anything from it. I took care of directing the project, and later I shared this task with my wife, Mirela. And thank goodness, because I couldn’t have done it without her!

Daniel: The format of this interactive narrative is very unique — did you have any inspirations from film, TV or other interactive stories you’ve encountered?

Deyan: From the beginning we wanted to do a web series, but the whole time I was worried about the word “web.” What does it mean? If you upload a movie or a TV show to the internet, does it automatically become web? There are many examples of web series around the world that are nothing more than uploading video content to YouTube. For me, that wasn’t enough. It took me years to realize that to be web, our project had to be interactive. So even if I wanted to, it wouldn’t be able to go on TV or cinemas and really deserve the definition of “web.”

So I’ve achieved peace of mind regarding the definition of “interactive web series”. But this has a downside. Since I got this insight quite late, and we had already shot all the material, we couldn’t realize the possibility of the viewer choosing the direction of the plot. The story remained linear. In that sense, what we ended up with is not exactly a game, but rather an interactive comics and a movie in one.

Daniel: Would love to hear a bit about how you stayed organized through this process — especially switching between filming and building interactivity.

Deyan: The project took us nine years. All this time we were learning on the go. We watched lessons, read books, analyzed good examples from the world. We were complete beginners at filmmaking, but with the help of friends and parents, we were able to achieve results that we enjoyed! For us, Drama in Panama is an additional specialization, a curriculum in a free elective subject. In the last stage, we received funding from a government program to cover the cost of programming the episodes. Unfortunately, no team of developers was able to cover the brief and dare to implement it. This presented us with a huge problem. It was unthinkable to return the money to the program, something had to be done! On the other hand, the money was not enough to look for a company from abroad. I was very scared. Then one of the professors at the academy showed me the Tumult Hype. I hadn’t heard of it. It was intimidating for me to take on something that even the professionals didn’t dare start. But there was no other way out.

I embarked on studying your product. By then, I was surprised. It was much more intuitive to work with than any other software I have used so far. Also, the help I received on the forum was extremely important. Things that were completely new and unheard of for me, I would not have caught up with them if it weren’t for the forum members I was annoying around the clock!

I managed to do in three months what the developers wanted to do in more than half a year and without offering me a mobile version or support for any browser other than Google Chrome. And I have it all now thanks to Hype.

Daniel: That’s incredible! Awesome to hear that Hype was intuitive to learn. What’s your favorite segment of the story?

Deyan: The plot and visuals come to a head in the last two episodes, as the Daydreamer (my wife and co-director) unfolds in the Valley of Lost Souls. This segment of the story is mystical, surreal and that makes it truly wonderful! I don’t like to watch the rest because I play the twins Francis and Henry, and I don’t think I’m a good actor. I wouldn’t make that mistake again!

Daniel: Do you have words of advice for others embarking on a project like this?

Deyan: Don’t compromise on the overall composition, even when you don’t get paid for it. You can shoot a film with a not-so-good camera and make it less than ideal quality, but if the script is carefully thought out and the dialogue and scenes are meaningful, you’ll be happy with the result. In the end, even if things don’t work out in the best possible way, you’ll know you did your best! There are more important things than money, even though they are really necessary. More importantly, build on our high goals and always aim higher than what we can achieve.

Daniel: Any upcoming projects you’re working on?

When we finished working on Drama in Panama, I felt like I didn’t want to take on a big project anymore. But here I am now, a few months later, itching for new challenges. I want to work and look for new inspirations and people to make art with.

Experience Drama in Panama: https://dramainpanama.eu/en/

Watch the Trailer:

Предлага се и на български език.

Directors
Deyan Sedlarski and Mirela Sedlarska

Script-Writer
Ivaylo Alekseev

Music
Zdravko Krustev

Since the release of the physical edition of A Book About Hype last May, we’ve been spreading the word about this comprehensive and helpful guide written by Michael Garofalo. This week, Michael announced a new digital edition of the book built with Hype(!) that ships with dozens of helpful Hype templates, an ePub version, and a full blown searchable app version with charming introductory animations for each chapter.

The book doesn’t just cover the nitty gritty of timelines, animations, and working with JavaScript in Hype — it can serve as a helpful guide to help get your projects off the ground in the planning stage:

“When starting a new Hype project, think of what you have and what you need. Illustrations, photographs, text and code, there are a lot of little pieces. You’ll want to minimize the time spent staring at an empty scene and get your project moving. Those initial steps are some of the most difficult to overcome. Here are a few ideas that can help.

Play — When you’re first starting out with Hype, or pretty much anything, you’re not likely to be great on your first try. If you want to learn, you’ll need to be open to experimenting. That also means being open to the idea of failure. There are plenty of unfinished Hype projects sitting on my computer. Was it wasted time? If the lessons learned can be applied to other projects, then knowledge was gained. That is something of value. That is an asset.”

Excerpt From: Michael Garofalo. “A Book About Hype.”

Grab the Book Here.

If you’re curious just how deep this book goes and what you might learn, explore the table of contents below:

Section I — Getting Started
• Chapter #1 — Installation
• Chapter #2 — Introduction
• Chapter #3 — Elements
• Chapter #4 — File Types
• Chapter #5 — Planning
• Chapter #6 — Inspector: Document
• Chapter #7 — Inspector: Scene
• Chapter #8 — Inspector: Metrics
• Chapter #9 — Inspector: Element
• Chapter #10 — Inspector: Typography
• Chapter #11 — Inspector: Actions
• Chapter #12 — Inspector: Physics
• Chapter #13 — Inspector: Identity

Section II — Animation
• Chapter #14 — Timelines
• Chapter #15 — Layers
• Chapter #16 — Properties and Keyframes
• Chapter #17 — Timing Functions
• Chapter #18 — Capo
• Chapter #19 — Timeline Actions
• Chapter #20 — Multiple Timelines

Section III — Hype Pro
• Chapter #21 — Going Pro
• Chapter #22 — Grid System
• Chapter #23 — Symbols
• Chapter #24 — Persistent Symbols
• Chapter #25 — Responsive Layouts
• Chapter #26 — Physics

Section IV — JavaScript
— JavaScript Basics
— Comments on Semicolons
• Chapter #27 — Adding Code
— Don’t Panic
— External Editors
• Chapter #28 — Parameters
• Chapter #29 — Get & Set
— Bouncing Explained
— Saving
• Chapter #30 — Scees
• Chapter #31 — Timelines
• Chapter #32 — Symbols
• Chapter #33 — Drag Events

Section V — Examples
• Chapter #34 — Coloring
— Grinding
• Chapter #35 — Sliding
— Shuffling
• Chapter #36 — Picturing
— Indexing
• Chapter #37 — Timing
• Chapter #38 — Navigating
— Arraying

Section VI — Publishing
• Chapter #39 — Testing
• Chapter #40 — Browser Support
• Chapter #41 — Export
• Chapter #42 — Advanced Export
• Chapter #43 — Export Scripts
• Chapter #44 — Widgets
— OAM Widget / WordPress
• Chapter #45 — Hype-To-App
• Chapter #46 — Hype-To-Home

Section VII — Advanced Design
• Chapter #47 — Dark Mode
— CSS Variables
• Chapter #48 — Accessibility
• Chapter #49 — Presentation Mode
— Keyboard Controls
— Fullscreen Mode

Section VIII — Games
• Chapter #50 — Jigsaw
• Chapter #51 — Physics API
• Chapter #52 — Circles with Grandma
— Artificial Intelligence
• Chapter #53 — Game Data
• Chapter #54 — Jump
— Collision Detection

Section IX — Hype Website
• Chapter #55 — Building A Hype Website
— Menu
— Extra Bits
— Conclusion

Update: The webinar replay can be watched here from the event on April 7th, 2021.

This webinar, hosted by our friends at Ajar Productions (creators of the popular in5 plugin for InDesign), is geared towards interactive publishers who want to take their digital books to the next level. It covers embedding content in InDesign, exporting with the powerful in5 plugin, and adding interactivity to your projects with Tumult Hype.

This webinar will show you how to create sophisticated animation & interactivity with Tumult Hype to level up your InDesign publication.
​

Ali’s team creates interactive animations to augment and improve the vast library of textbooks her team distributes for free on the Apple Books Store for the College of Veterinary Medicine students. Interactives range from the flow of oxygen through the respiratory system to detailed 3D animations of bones and joints. By writing and designing their own interactive textbooks in-house, they can easily update, distribute, and control their curriculum.

Daniel Morgan @ Tumult: It was great to see the animations you shared with us — The common theme for your animations seems to be approaching a medical concept from multiple angles ‘states’. What has it been like creating technical and medical animations with Hype?

Ali Ennis: It has been so fun creating animations using Hype. It is so easy to use, which allows us to quickly add interactivity to any animation or illustration. The field of medical illustration is all about conveying and teaching scientific information and concepts in a way that is clear and engaging. This requires a lot of creative problem solving, and Hype has been a very helpful tool for us to use to solve learning problems. Standard linear animations are sometimes limited in how much viewers will actually pay attention and understand a concept. Hype allows us to challenge our users to dig into a concept, and it encourages them to do something in order to see how and why things change.

Why did UGA choose the iBooks platform for creating this type of content? Do you have any thoughts on the transition to Pages for book production?

We chose the iBooks platform right after it was released because we wanted to create user friendly interactive books that could include different types of widgets to increase learner engagement. For testing purposes, our vet students now are required to have a Mac laptop, which means the software limitation hasn’t been an issue.
The transition to Pages is worrisome because we rely heavily on the widgets we can use to incorporate interactivity into iBooks, especially html5 content. This helps the content come alive. We’re hopeful that Pages will add this feature soon.

We’re also definitely hoping to see full support for HTML content in Pages. Embedding web content is a huge missing piece in an otherwise complete transfer of functionality from iBooks Author. What were the biggest challenges you encountered creating medical animations for these digital books?

A big challenge was focusing on the main concepts and ensuring the most time is spent to convey them creatively and clearly. It’s easy to want to make an animation or illustration for everything, but of course, too many visuals can be distracting and can take away from what you want the students to learn.

Can you tell us a bit about the creative process for creating these animations? Did you have a different go-to tool for creating these before working in Hype?

Our projects almost always accompany text, so our goal is always to help readers visualize the content. The first step is deciding if an interactive is the best way to help students pause from reading to dive into a visual. From there, we will write out what the users will see and what type of interactivity to include. Depending on the complexity of the animation, I will start with a few sketches or a complete storyboard to map out what each interface and animation will look like. I create most of the interface elements for my Hype files in Adobe Illustrator and Photoshop. When a project includes 3D animation or rotating 3D models, I use Cinema 4D and Zbrush to create the models and animate them. From there, I will render a .jpg or .png sequence using Redshift and either bring those frames directly into Hype or do some editing in Adobe After Effects before importing them. We use a lot of layered frame sequences with sliders to show something rotating or changing over time.

A few sketches from Ali's process can be found below: 

Thanks Ali! Looking forward to seeing new animations coming down the line! Check out all the books published by the Educational Resources Unit at UGA here.

The tools educators like Ali depend on are going through a bit of a flux at the moment: Apple has discontinued their free tool for embedding interactive content in digital books, and its replacement (Pages) lacks support for embedding HTML content — a feature introduced a decade ago and used widely. Curriculum developers around the world depend on the ability to create textbooks that extend beyond simple image and video embeds. The ability to interact in a non-linear fashion with a piece of content puts the learner in control to explore, interact, and digest information in a way that feels more real to them. Institutions like the University of Georgia made large investments in iPads and Macs because of Apple’s unwavering support for educators and animators like Ali and the students they both serve. We hope Apple will bring the full spectrum of support they introduced a decade back into their tools.

Read more about the iBooks Author transition here.