Seeking Advice on Hype Animations!

Animation
1

Hi Community,

I am relatively new to using Hype and more excited to explore its capabilities. I am currently working on a project where I need to create interactive animations. I have gone through the basics but could use some guidance on more advanced techniques.

  • What are some best ways to optimize animations for performance ?
  • Are there any good practices for integrating JavaScript with Hype animations ?
  • How can I make sure compatibility across different devices and browsers ?

Any tips, resources or examples you can share would be greatly appreciated. I am eager to learn and improve my skills in Hype. I also went through this: https://forums.tumult.com/t/can-hype-be-a-good-choice-for-animated-videos-sfmc/ but couldn't find, I wanted to learn.

Thanks in advance for your help.

James

2

I think to get an answer, you should probably have some more concrete questions. What is your goal and what is the type of animation you want to make interactive? There are different ways to go about it, given your willingness to learn code or to only use the interface of Hype. Also, in my case, I use my extensions that introduce a dependency, but mostly are all open source anyway.

1 Like
3

I don't really worry about optimizing the animations, it's more about optimizing the images. ImageOptim is a good app for that.

But, there are general things I try to avoid… too many Physics elements, or too many elements in general, that can slow things down. And when it's too many, it becomes quite apparent. Also, what was slow years ago might be less of a problem today. The browsers (and the computers that run those browser) have gotten better.

One of the problems I'm seeing lately is fullscreen. A Hype project at 640x360 could run fine. But enlarge that project to 3840x2160 (4K) and it can slow down dramatically.

Here's an example… https://photics.com/free-template-tuesday-6-tumult-hype-fps/ …in the little window, it's near constant 60 FPS. But when I switched it to fullscreen 4K, very choppy!

Using the FPS gauge (the second one is better) might help with keeping track of the performance of the animation.

The developer tools in the web browser can also be helpful.

But also, did you miss this topic… Largest Contentful Paint (LCP) / fetchpriority / SEO In Hype …which is quite related to performance testing. Using Google's PageSpeed Insights can highlight lots of problems with a webpage — especially if search engine optimization is a concern.

Testing is probably a good idea!

But in general, cross platform compatibility is one of the main reasons to use Hype. While the app is Mac only, the exported project is usually pretty good across different browsers and devices.

Although, it is important to watch the Browser Compatibility Warnings…

browser-compatibility-warnings
browser-compatibility-warnings548×696 45.1 KB

If you ignore those little yellow triangles, then you might have problems with cross platform compatibility. Also, it depends what your project requires. If you don't support Internet Explorer, then you can turn off those “IE” warnings.

Fonts are another concern, especially if you're not using “Web” fonts.

This is a problem.

If you're making games with Hype, then that's going to have certain differences when compared to making banner ads with Hype.

1 Like