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:

We’re happy to share a limited time discount on all our apps from November 25th 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.

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

We’re happy to share a limited time discount on all our apps. 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.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’re happy to share a limited time discount on all our apps. 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.

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