How are you integrating Hype animations into modern websites?

Animation
1

Hi everyone,

I’ve recently been exploring Tumult Hype and I’m curious how people here are integrating Hype animations into modern websites and workflows.

For example, are you mostly using Hype for landing page animations, interactive storytelling, UI elements, or something else entirely?

I’m also interested in how developers are handling things like:
• performance optimization
• responsive layouts across devices
• combining Hype with custom JavaScript or external CSS
• embedding Hype projects into CMS platforms like WordPress or other site builders

It would be great to hear how others are using Hype in real projects and what best practices you’ve discovered along the way.

Looking forward to learning from the community.

2

Landing page example — A Book About Hype

(The book is not available right now, waiting for Hype 5 to be released before creating a new version of the book.)

Book Example — Free Template Tuesday #14 – Tumult Hype “Book” – Photics.com

While Hype is lightweight, I fairly recently I swapped out the Photics.TV happy face with some HTML/CSS/SVG/JavaScript. So, I don't really use Hype for building a user interface on website lately, but I suppose it was done in the past…

— https://photics.com/files/templates/filters/

…and if it's a video game…

— https://photics.com/free-template-tuesday-39-tumult-hype-controlling/

I have used Hype to make Apps, but those were mainly games.

I created an FPS gauge to measure the performance…

Generally, performance hasn't been much of a problem with my Hype projects, unless I use large images or too many Physics objects. Although, I think Hype could improve in this area by adding the Matter.js debug tools to Hype.

Image optimization is important… ImageOptim — better Save for Web

Now that there's Flexbox, Grid, and Columns, I don't like how Hype handles responsive design.

— Free Template Tuesday #35 – Tumult Hype “Webpage” – Photics.com

That example supports two modes. Maybe it could be improved by using symbols, as it has a content duplication problem. There are modern tools to solve this problem and Hype doesn't include them.

Since Hype is so vanilla, I was able to better understand web development. Eventually, I started using the timeline in Hype a lot less and adding JavaScript a lot more.

However, I usually have the “Protect from external styles” option enabled, as I don't usually use outside CSS styling with my Hype projects.

There's a plugin — Tumult Hype Animations Wordpress Plugin — but I don't use it. Instead, I've been using iFrames and some CSS to allow for scaling.

Although, that causes the looking eyes of the happy face to stop tracking when the cursor is hovering over a Hype project. So, I suppose I could improve that situation. I try to limit the amount of plugins running on my WordPress setup. But also, there was something I didn't like about how the plugin functioned… Tumult Hype Animations Wordpress Plugin - #112 by Photics …I don't remember why exactly I switched back to iFrames. :man_shrugging:t2:

Sometimes I wonder if I need WordPress at all. But even if Hype added local database management, to export static webpages, there are still features in WordPress that are really good.

3

Also, “Drama in Panama” also won “Honorable Mention” in the “Year of Fun”…

4

Outstanding btw. Also consider Hype for Infographics galore!