Hi, we’re using Hype now for the past year or so to generate animations on the hero element of our website @ librio.com
The hypes we create have 3 breakpoints set, mobile, tablet and desktop, which should match one of the 4 breakpoints we use on the site, mobile (hype mobile), tablet (hype tablet), small (hype tablet) & large desktop (hype desktop).
The breakpoint sizing is where the issue arises for me, because hype appears to calculate breakpoints based on the width of it’s containing element (or the HYPE_document class), rather than using the size of the window/document object?
We embed the script tag from the export of the animated content into a parent container which is set to 100% on mobile, but has a gutter on larger sizes. This means that as the device width expands approaching the tablet breakpoint, there is a point (723px) when the mobile containing element is larger than it is at the tablet size.
If we set the breakpoint in hype to switch up to the tablet scene at 768, it will completely skip the site tablet size, because through that whole breakpoint, the hype’s parent element is only 722px no matter how large the device width expands.
So my question really is;
- why does hype use the parent container width instead of device?
- is there anything we can do to make it correctly use the device dimensions instead?
I tried simply moving the HYPE_document class further up the DOM all the way to the body tag infact, but this causes other undesirable behaviour with the layout, so for now is not an option.
Apologies if this is confusing to read, it’s difficult to explain, and it took me quite some time banging my head against the wall to realise why the hype breakpoint resizing was behaving so strangely. Also apologies if this has been asked before or documented in the guides, I couldn’t find anything about it when searching, and I’m also not the designer, so unable to test things quickly, I’m just responsible for integrating the finished product.
Thanks in advance, would appreciate any help with this!