Question about blurry quality on images when in a group

[Rasmus (Freelancer)]

I'm doing a short and simple name presentation for a seminar. Name and title will be changed for a bunch of people so it will be many videos. All will be exported to mp4.

I am doing a simple rotation in a "talking bubble" from name to title. Name (1. in Hypefile attached) works perfectly. Title (2. in Hypefile attached) get's blurry. I grouped them because I couldn't figure out how to make the transform origin to work properly if outside a group.

When I export to HTML5 both looks perfect. When I export to video nr 2 is blurry. Anyone?

sparkbanken.zip (662.0 KB)

[MaxZieb (Loves Hype)]

My guess… avoid image optimization on export and continued rotation values on rotation Y … rather than going from -90° to -180° flip the image in Photoshop and go from 90° to 0° … not tested.

[Rasmus (Freelancer)]

Thanks Max will try that. There must be an issue on Hypes "export to video". I tried to convert the HTML5 export to mp4 using https://html5animationtogif.com/ and the result is perfect. Very strange.

[MaxZieb (Loves Hype)]

This might help as well…

Save animations to webm (using HYPE.video.js, Whammy and HTML2Canvas)

[CleanShot 2021-06-07 at 00.44.17@2x] This is a little nerdy but might be of help to somebody. You can save an animation to webm by integrating the Hype Video Export runtime in your project and sprinkle in some Whammy and HTML2Canvas. This has the limitations of HTML2Canvas and certainly will use a lot of RAM, but it runs on a frame by frame basis, so no frame should be dropped. On the contrary, you can define your framerate, scale and even the HTML element to be recorded. Preview Concept: S…

[jonathan (Jonathan Deutsch)]

Alternatively, do not put a 280% scale on the group. Make the group/image the final size you want via the "Placement" width/heights.

[Rasmus (Freelancer)]

Thank you Jonathan worked like a charm! Got another question. How do I spin this bubble in a normal way without it leaving the scene. Can't get the transform origin to work properly. I'm attaching a file.

spin.zip (1.3 MB)

[jonathan (Jonathan Deutsch)]

It sounds like this is likely due to perspective being applied? Can you try adding this code to the Head HTML (via the Document Inspector's Edit Head HTML… button):

Rotate elements on canvas

Hype applies perspective to 3D rotations; it has been a long standing request for this to be configurable. You can override through a CSS rule (in the HTML head) like: <style> div { perspective: none !important; } </style> Alternatively, you can also better control the perspective by making the element bounds smaller (just to the ellipse) and then putting it in a group. There will still be perspective, but it won’t be dependent on the position if you are moving the group.

[Rasmus (Freelancer)]

Super easy fix and worked like a charm. Thanks again Jonathan! I am not very good with code.