Tools Hype vs Rive

Animation
1

HYPE

  • Can export html
  • Can import with widget
  • Can import video and gif

Rive

  • Bone Rig
  • Cut.out tool
  • Available mask with shape vector.
  • Gradient color in fill and stroke.
  • Totally online, windows and apple.

Hype with Rive = Superpowerful Superior than Adobe Flash

2

Rive works with a canvas if I remember correctly. Hence, pixel based.

3

I have been using Rive and Hype together. Unfortunately, rive files do not preview in the GUI, so you need to work blind re: div contents.

I was just reading about Max's data magic library and this left me wondering if there might be a way i can direct hype to load and display rive files in the GUI. Not sure if that's worth pursuing or not.

Rive is very efficient and the animations are buttery smooth, however being canvas based it dictates a very different approach, I like both apps but would choose Hype if I could only have one of the two.

2 Likes
4

To clarify, you're importing a rive file into a .hype document? And this does not show up in the Hype scene editor, but if you do a simple preview to a browser, do you see it?

I'd expect that it would show up in the editor in some form if it showed up in the preview. That said, you won't really be able to do much to control it/work on syncing animations anyhow :). You're welcome to send a .hype document that has it and I can at least glance to see what might be happening.

5

rive_in_hype_template.hype.zip (21.3 KB)

Hi Jonathan,

Thanks! And correct - I can only see the Rive file when doing a preview or after export. Sample file attached.

Cheers,
Raph

6

Integrating Live Previews for Third-Party Libraries

As the developer behind Hype Data Magic, I'd like to share some insights regarding the integration of a live preview. While it is feasible, it's not without challenges.

To achieve this, one must utilize data attributes and the mutation observer, especially since there isn't an official extension API within the Builder preview—a feature many of us have been requesting for a while. For static content, like elements that fit within a rectangle, the aforementioned methods work well. Another viable solution is using an extension like

However, the real hurdle surfaces when trying to synchronize the preview with timeline scrubbing. The IDE doesn't provide clear cues about animations, except for style alterations. I once integrated a Lotti player with Builder timeline scrubbing by observing the width (or another property) progression of an animation. This method allowed the property's animation to control the time index of my Lotti animation. While an interesting experiment, I'm still contemplating if the effort was truly worthwhile. I appreciate that Hype Data Magic offers a preview, but I've since developed Hype Reactive Content. There, I only provide usage indications (labels) without any builder preview. Without a dedicated API, maintaining such features becomes taxing, and they're often the first to malfunction after Hype updates.

Conclusion: Should Hype introduce an extension API in the future, I anticipate it will come with IDE hooks and events to facilitate previews. However, until then, implementing such features comes with considerable overhead.

1 Like
7

Ah, I see. There's javascript code that you run to startup the rive document on scene load, but scene load handler's aren't called in the hype editor environment.

There might be some ways to do this, like running code in the head html or by putting it all in an HTML Widget (which is an iframe), but given there's not much of a way to interact with it, probably not worth the effort to try.

I generally agree with @MaxZieb's assessment; things like this need special cases with Hype editor API support.

1 Like