Typewriter effect in Hype

The Type code works fine.

But as I said I noticed something odd. I did not have time to look at it and see what it was.
The thing I noticed was actually mentioned in the post prior to yours by @jonerikj , I assumed they had made changes so I did not investigate without more details

So any way it was simply that the timeline that fires all the type() function interval's were too short in relation to the typing speed.
This means the intervals have a chance to clash.

The timeline firing the type() function action interval's therefor should be longer than the type speed and take into account the length of characters.

Also the original Type text extension was not written for multiple type boxes per say and this was an adaption.

It works but as with all the example we put up here tweaking may be needed.

sceneType 2.hype.zip (43.6 KB)

@jonerikj sorry for not following up sooner.

1 Like

@MarkHunte

Thanks! I play with it a bit and see how it goes!

A little off-topic question. But and how do I work with Hype frame by frame? I mean, if I wanted to manually create the "typewriter" effect by acting letter by letter, which technique should I use?

I used in the past Flash and I remember that working frame by frame could do a lot.

Now I notice that Hype does magic by creating him the intermediate frames with movements and other changes, but what if I wanted to modify myself frame by frame?

I do not understand what you want you do. ?

I want to write 1 letter to a frame, 2 letters in the 2nd frame, 3 letters in the 3rd frame, and so on. frame by frame without apply specific effect, like old Flash.

I take advantage of another question:

I am designing a website by testing it on the iPhone X.

I wanted to know the size of the Safari Mobile area without the top address bar and the bottom button bar, vertically.

I can't find official documentation, from some tests it could be 1125x1903 or 1125x1905, what can you confirm?

From here I find only the maximum resolution of the whole screen:
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
iPhone X - 375x812 pt (1125x2436 px @ 3x)

But then why Hype in the default size puts 375x812 px and not 375x812 pt, px instead of pt?

For me this is important to start with the right size.

Thanks!

1 Like

The definition of a pt vs px is different in the two contexts. Where Apple says:

Where apple says "px" here, they are using it as a physical hardware pixel. This is the smallest full color unit to work with. Where they say "pt" they are referring to a logical pixel that is a 3 by 3 grid of physical pixels. When working with different resolutions, they do not want developers to have to accommodate all the different sizes, so they can use the same logical pixel addressing for a non-retina @1x screen as well as @2x and @3x retina screens.

CSS uses "px" to represent a logical pixel, not a physical one. Since this is the easiest unit to work with and is resolution independent, that is what Hype uses for its base unit.

In CSS a "pt" is more of a print unit, and defined as 1/72 of an inch. Therefore this is also a logical unit. "px" is basically the same but represents 1/96 of an inch. Generally folks don't work with CSS pt unless doing printing.

Generally when working with HTML, you should always choose sizes based on logical pixels, and this lets the browser render correctly. (Just make sure for stuff like images you have enough physical pixel content for whatever resolution it needs).

Thanks @jonathan!

To be even more direct and to avoid misunderstandings, for me, having to create a website perfectly optimized for iPhone X on Safari Mobile, what is the maximum area not to have side scrolling?

What Resignation Scene would you put, the one proposed by Hype 375x812 px with 100% height scale?

I am confused with which scene dimension to start designing, for not having side scrolling on iPhone X and taking advantage of the entire Mobile Safari area with the top and bottom bar visible.

Then I would move on to the iPad and Desktop layouts.

@jonathan!
I think I spotted it, 375x635px!

Do you think it is correct that I design with this custom setting?

We used to provide presets to account for the top/bottom areas, but with the toolbar autohiding it tended to be less relevant.

In my recent testing (putting boxes at the top and bottom) I found that 375x629 was the appropriate size for my iPhone 12 mini with iOS 14.6 beta.