How to create something similar to the 'Heroku Platform Scale' Demo

Animation
1

Hi all,

I’m new to Hype, but amazed by all these things you can with it.

I’m currently interested to make something like this:

http://tumult.com/hype/gallery/HerokuPlatformScale/HerokuPlatformScale.html

I have a screenshot of our Learning Management System, which contains some ‘hot points’ signposted with pulsing pins. Once people hover their mouse over those pins, I want a tooltip with a quick explanation to appear over it — similar to what Heroku has done in the example above.

I work for a university and instead of writing long documents explaining the various options in the LMS, I wish to create interactive elements like the one above which can be embedded in our support pages.

Any help with this greatly appreciated.

Many thanks.
Harry

2

you can do it with HypePro only, without external code, maybe only a bit of CSS for the responsive behavior.
you need to build a scene with a static background and some POI+ pop-ups elements with timeline ( better through symbols ).
The layout must be responsive? (readable with a phone)

1 Like
3

There are a lot of threads that have examples similar to what you are after. Much of hover and display is basic stuff in Hype.

Simple Example.

info.hype.zip (30.8 KB)

1 Like
4

Thanks very much both. I think I got it right.

Ideally I wanted this to be responsive. But I’m using a screenshot from a page which is partially responsive. So not much I can do about it at the moment.

Feel free to have a look. Any feedback greatly appreciated.

student-turnitin-grademark.hype.zip (108.1 KB)

5

If you’re working with a screenshot, there’s not much you can do except scale it as part of a flexible layout.

My main bit of feedback would be to either have a way to manually advance when showing the steps or to have a progress meter; 10 seconds was a long amount of time and I wasn’t sure if something was wrong.

6

Hi Jonathan,

That is actually a very good idea. A progress meter would be very much needed.

Because people in my institution have told me that the tooltips should stay even longer than they do now, because people need time to read them.

I guess a progress meter would be ideal to accommodate both people who read fast and people who take their time.

However, I have no idea how to do this I’m afraid.

Many thanks.

1 Like
7

The easiest way would be to have a rectangle element animate growth in width over the duration of the timeline.

8

Thanks very much Jonathan.

I added a progress bar which gives you a sense of how much time has left.

I know the UI looks very familiar to Mac users, but this is a proof of concept.

Hopefully, if I get the thumbs-up next week, I will come up with a more original design in the next iteration.

The latest version below:

make-submission.hype.zip (161.1 KB)

Note: animations like the attached are going to be part of a knowledge base site, so they won’t look out of context.

Many thanks.
Harry

1 Like
9

Haha, that’s clever use of UI! You may want to change the timing function on the progress meter to be “linear” so it progresses at an even rate and doesn’t ease while starting/stopping.

10

The ‘First draft’ text field need to be wider so it does not compress the text in some browsers.

Also you may want to add a tooltip about max size and max attachments. This is something I find trips people up…

I also took the liberty here to show you that…

make-submission_mh_v1.hype.zip (181.1 KB)