Animations presets for objects and Texts (like Apple's Keynote)

bernatbofill · February 23, 2021, 2:07am

What do you want to see in Hype?
I would like to have Animation Presets similar to the ones in Apple's Keynote app (Keynote can play presentations directly from the website so I guess the animations are base on html5 so should be possible to recreate most of them on hype. and same as Keynote has with typography, different options to apply to all text, by paragraph, by lines, by words, or by characters.
Have you found a workaround for this problem?
Now working in a typography animation and need to do everything manually, is a very time-consuming task. for example, if one word I want to animate the characters need to create each character separately so y can make the first one letter to and then the next, the next, ....
Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)
Apple's Keynote
How high of a priority is this for you?
If have it will speed up the work a lot

[ ] Nice to Have
[ X ] Important
[ ] Can't use Hype without it

jonathan · February 23, 2021, 6:41pm

Thanks for the request!

This is under active investigation.

Keynote's approach isn't exactly "web native" in that it first has access to all the metrics of the cocoa text system to properly split the text. It then writes each letter into a PDF as part of the HTML export. This PDF is read by JavaScript and rendered into an opaque <canvas> element and then animated with build in effects. It is kinda wild for a webpage but does work well for making presentations portable.

In comparison, Hype's text fields allow arbitrary, yet accessible/selectable, Inner HTML which could be anything. There aren't good web APIs to split up this type of content into letter and get accurate metrics for how they should be joined.

This is not to say we can't create this as a feature either by providing a new type of text element or restricting these animations to text elements deemed animatable, but the unfortunately reality is that Keynote's technique is far from how we'd be able to do it. I'd love to see this as well and think it would be a huge boon to animations. Thanks!

bernatbofill · February 24, 2021, 7:58am

Hi Jonathan, thanks for your detailed explanation. Actually, in the Forum I found something similar to what I mean from a topic 3 years ago about Textillate.js I'm trying it and do what I mean, but still not get how to control the animations.