Hype 5, the future, real projects!

Hi guys and girls!
I'd really like to love Hype, and i always get drawn back to it to play around a bit. Nowadays there's lottie, Rive, but i really enjoy all the extra's Hype brings. I really wonder why it's just not so populair and has an large active community?

I'm about to start a new project, and would like to give Hype a try, but i wonder if it's a wise choice. When will there be a Hype 5, does it have a future? Is it actively developed still, not just minor tweaks but new cool stuff?

Again, i love Hype, but haven't been able to use it for commercial stuff yet.

Love to hear from you all!

Cheers,
Nout

1 Like

It all depends what you need. I don't think theres one magic tool out there that has everything you ever need. But Imo, Hype is a very strong tool that does certain things very good, and certain things can be improved (svg). But theres nothing stopping you from using multiple tools at the same time, or even combining them.

3 Likes

Hi! Always feel free to say what you'd like to see or if there are tools from other apps you particularly love :slight_smile:. We're still under active development, but of course it has been a while since the last update :sweat_smile:. (We don't comment on specific features or release dates, unfortunately)

5 Likes

:point_up: this gets me very …

4 Likes

Jonathan, I for one am in love with hype and I have done some pretty cool stuff with it. Simple things that would change my life?

  • Direct import from Figma
  • OnScroll animation/timeline control
  • Relative positioning
  • Lottie and 3d embedding support (with again animation/keyframable properties)

The first three being my absolute wishlist. I’d buy a perpetual license for $1000+ lol

2 Likes

Haha, I'll hold you to that :wink: . But seriously, thank you for this prioritized list!

Looking (quickly) at Lottie and Rive, I guess you never needed the complexity that hype has to offer. That is ok though. :slight_smile: I personally love the mirade of options Hype has to offer with its different scenes for example.
Say Scene one you have 5 buttons. No way of telling which button a user will press first. Now you can get complex with scripting or keep it simple and each button leads to another scene where this or that happens.
You can use Hype for much more then "just" animation, but that is up to you, the user.

My biggest wish would be an automated system to (evenly) spread out properties on a timeline. Dragging those 50 times out by hand when creating an animation with 50 frames gets frustrating at some point. :wink:

3 Likes

Prior to Hype 5, I hope there will be a call for version 4.5 beta testers. There was such for the v. 4.0 and it was a really great testing experience back in 2018!

1 Like

I'm not sure I exactly follow what properties (on a single element) you'd need even spacing with keyframes but wouldn't just use a single animation for the duration... Unless you mean staggering animations of the same property across different elements? But I do think there's theoretically interesting ideas of doing distribution of keyframes.

Can you elaborate on this or show an example where you did it manually? Thanks!

Sorry for being so unclear, I had a movie made a while back but couldn't find it yesterday. I hope this video makes it more clear I had to trim it down and I have no video editing tools other then quicktime here.

4 Likes

That seems like a job for some code :slight_smile:

Yes, very clear!

I had wanted to do a "stagger" but never thought about it in terms of the distribute/align tools before. Thanks!

Hi
I am happy to sheare my thought on the next version of Hype :wink:
Here a small list:

▪	Scene "programming sequence" see attached image to a better understood
▪	Layer with timeline in the scene, like layer in Illustrator/Designer
▪	Multilanguage string, when a proget need to be translate for different language (english, italian, german...), link to audio file related to the current language
▪	Having the concept of Object. Where an object is any element with own characteristic able to life in a slide/canvas, build a library of reusable object, where is easy to modify the object its self, drag the object from the library, object may have js code attached to him with parameters
▪	May be interesting to have "Super Object" like create a questionary, quiz, drawing canvas, checkbox, table, DB access, think on how may be useful using Hype to create a lesson/courses for an LMS like Moodle...
▪	Having button to stop/start/reverse/forward the aninimaton, or a control bar, like the control bar of a video player
▪	3d animation

:blush:

Ciao

Scene Programming can be done using the action panel. Only thing missing is a conditional block with nested actions or you need code.

I think the keyframe system needs fixing.

  • Changing a keyframe on any timeline affects the Main Timeline's state, causing significant frustration. This has led to hours spent correcting unexpected changes, such as opacity values jumping to 200% or other parameters breaking animations. This "helper" feature, reminiscent of Clippy, should be removed due to its counterproductive nature.

  • In timelines apart from the Main Timeline, the requirement to set the first keyframe is particularly complicated. Although relative timelines exist, there's an issue when, for example, an opacity change from 0 to 100 in a fadeIn timeline at second 1 occurs, but the main timeline's opacity is already at 100. This results in an abrupt jump from 100 to 0 at second 1 for the fade-in. It would be preferable for the timeline to consider the first frame as the initial state rather than inheriting it from the Main Timeline. This is something to discuss.

  • Auto-Selecting all keyframes on the first click makes us click once more to deselect (click beside keyframes) and the I need another click to select them again. Please remove the auto selection.

CleanShot 2024-04-09 at 09.56.43
Selecting all shouldn't be the default. Double clicking could select all. Single click should directly select what was targeted.

  • Implementing hold frames is a much-needed feature. When properties like innerHTML or Display are altered, these changes occur instantly without a transition duration. In many animation packages, such instantaneous changes are represented by a single square keyframe at the moment of the change.


Red stuff shouldn't be there

5 Likes

Oh yes, I can testify that this weirdness had happened once in a while;
in my case(s) I had experienced jumps to unexpected values such as minus 100% opacity @Daniel mentioned a while ago that other users had also experienced those weird jumps when fading in and out…

2 Likes

Yeah, it basically shifts all key frames by an offset. I absolutely hate it when this happens. I have not had an example where I found this to be a remotely useful behavior. It was discussed and addressed before as some quirky solution for some edge case, but the repercussions are still felt and should bring this to the forefront of reevaluation.

1 Like

Thanks so much for this list and the diagram of scene programming sequence! I think there definitely should be ways to examine the overall flow.

1 Like

Say for left/top -- when your playhead isn't on any keyframes and you use the scene editor to move an element, I'm curious to know what you think should happen? Do you have thoughts on how you'd like to offset something across all keyframes?

Hi Jonathan,

let's think about this: I want to avoid a situation where actions affect all other key frames and timelines, potentially disrupting previous work. It's too easy to make changes/mistakes in one place and unintentionally impact all others, leading to chaos. This recurring issue makes me question whether I'm not stringent enough in my animation effort or if there's a more significant problem, especially for beginners.

While I don't have an immediate solution, I feel strongly that I'd prefer to prevent these offsets from influencing parameters as a side effect on key frames I've intentionally set to a specific value.

So, let's fire up other animation software packages and collect maybe some feedback on how other animation packages handle this. I'll try to see what after effect does today.

Comparing Hype and After Effects

Okay, so I fired up After Effects… as seen in the video: Once a timeline is set to “record” (indicated by a little stopwatch icon for each property), any movement or change to a property results in the creation of a new keyframe. This approach assumes that creating a keyframe was intentional by the animator and there is no need for side effects. I'd go as far as to say animators would get furious if keyframe were to change as a side effect. So what about the case for positional adjustments (like repositioning an entire animation) after the fact? In After Effects, one would link it to a null object and move that null object (rebasing the offset).

Transferring this logic to Hype, moving anything would always create a keyframe if the timeline already contains keyframes (that fact acting like the stop watch intent in After Effects). So, again how do we handle moving an entire animation in such a scenario? Since Hype doesn't support virtual null objects, one workaround is to group an animation and apply an offset to the group after the fact, but this leads to nesting. Since groups are actual DIV elements and not virtual, this should probably not be the default case for handling the intent. In Hype, there should be an optional mode that translates all positional keyframes upon dragging (possibly with a modifier like shift-drag), limiting this behavior to the particular edge case of positional adjustments after the fact. I'd say for most other properties, there is hardly a case to be made that shouldn't just create new keyframes.

Another approach to solve positional offsets after the fact, if Hype were to adopt the After Effects approach, is how groups are decomposed. For example, if a layer with positional keyframes is grouped, moved, and then the group is decomposed, Hype adjusts the positional keyframes to reflect the new positional state post-decomposition. Giving us another way to reposition as a workaround. Sidenote: After Effects would simply revert to the original state without the virtual null object modifier upon removing a null object association. Although that difference between a virtual modifier and an actual one like a group, makes sense.