We selected Hype as our banner animation tool about 8 months ago and things had been going well up until we needed to animate lots of graphic text. In order to keep file size down, deliver crisp text and more easily resize from size to size, our format of choice is SVG. This has presented several issues with blurry images in IE 11 with some issues in other browsers.
We’ve investigated the forums to ensure that our SVGs (pre-Hype) are optimal and are sure to use pixel resizing instead of percentages and are still having a ton of issues.
This has become such an issue that we are considering moving away from Hype to Adobe Animate. This is not our preference as we know that Hype will be easier for most of our team to use, but will do so to improve the quality of our work.
I’ve attached an example of one of our banners with this issue and a screenshot from IE11 comparing a banner built in Hype vs. Animate.
The issue here is that the SVGs are being scaled but IE11 is not able to re-render them appropriately. Instead of scaling them using Hype’s scaling, use regular resizing to set their size.
In this demo, I resized the ribbon below your ribbon using regular width + height values:
The ribbon you had setup was in a group set to scale at 150%, and the ribbon itself was scaled to 110%, and I think IE was having a hard time rasterizing the SVG and displaying it.
