Hype + Layer Slider issue


(Octavian Chelaru) #1

Hi guys,

We’d like to use Hype to spice up a project with a bit of motion and have run into a bit of an issue.
Within a Layer Slider I have 5 slides and each one contains an independent Hype scene.

The scenes themselves work just fine if added straight in the markup, however within Layer Slider they behave in a fairly strange way, in that one one will play and the others will not show up. If resizing the window even a bit when on a disabled slide it will start working, but the one previously working will break.

I’m not entirely sure how to share this with you guys since the site is in local production and the .hype files themselves work fine on their own so I made a quick gif of the behaviour below. The faded images are not part of the hype scene, just there to help define the hype container (liquid) so hype is being displayed properly when the vertical red lines fill up the space.

Please let me know if you have any ideas/suggestions, they’d be most welcome :smile:

Cheers,
Octavian


New website - full of Hype baby
(Octavian Chelaru) #2

After further investigation, it seems the cause is the fact that the .HYPE-element items aren’t getting set to the correct width/height, despite the parent containers all having the correct dimensions. Ex. background images are 0 width, 0 height.

On window resize, the dimensions are being applied correctly so the animation then becomes visible. To test, I hardcoded the width and height of .HYPE-element to 100% and, indeed, all slides show up just fine but they are, as expected, quite broken design-wise.

Quick look:

Cheers,
Octavian


#3

If you place a responsive Tumult Hype document which scales on the ‘height’ dimension, you need to make sure you are placing it in an element which itself has a height. If the Hype element is filling 100% of an element with no height set, then its height will be 0. Can you uncheck the ‘height’ scale checkbox and see if that fixes it?

It’s pretty hard to see from your screencasts what’s right and what’s wrong…


(Octavian Chelaru) #4

Hi Daniel,

Thank you so much for taking the time to look into this!

The Hype document is placed within a container that has defined height. To have it respond as I want it to, I’m using a bit of a hack and placing an image of the same size in the parent div (relative), then on top comes the Hype doc with position absolute and 100% width and height.

Parent container takes uses the dimensions of the image to define it’s size and then Hype takes the full width and height of the parent. This method works quite well for responsive content bits, not so much within Layer Slider though :slight_smile:

I checked all containers from the Hype parent right down to the .HYPE_element_container and they all register correct dimensions, it’s just the actual .HYPE-element width and height (set by Hype JS) that is not right until the window is resized.

I’ll try to get this on a live test server later on today so it’s much easier to debug.

Cheers,
Octavian


(Octavian Chelaru) #5

Hi again,

Just put this up on a live server right here:
http://www.theepicadventurers.com/homepage-animated/

We have the teaser done and ready at / and now it’s a matter of checking to see if we can replace some of the images/sections with Hype docs to add some motion and finish it off.

Adding this to the inspector should highlight the issue :

#layerslider_3 .HYPE_element_container .HYPE_element {
	width:100% !important;
	height:100% !important;
}

Let me know if this helps :wink:

Kind regards,
Octavian


(Octavian Chelaru) #6

Hi guys,

Just to follow up, I couldn’t manage to robustly use Hype in the Layer Slider so ended up having to use Gifs - not ideal but gets the job done.

Apart from that it’s all Hype baby and I have to say, I’m a convert. What an amazing piece of software, congrats guys!!

Here’s the end result: http://www.theepicadventurers.com/

Cheers,
Octavian

PS: Do let me know if this gets investigated/fixed at some point or another, would love to replace those gifs as well :slight_smile:


#7

This makes me think that using the relayoutIfNecessary() function might be useful to run ‘on scene load’ for those slides.

More info: http://tumult.com/hype/documentation/3.0/#relayoutIfNecessary [quote=“Octavian, post:5, topic:9325”]
Just put this up on a live server right here: http://www.theepicadventurers.com/homepage-animated/
[/quote]

Could you put back up a test page?


(Octavian Chelaru) #8

Hi Daniel,

Thank you for the reply, many apologies I didn’t notice it earlier :blush:
We’re a tiny bit swamped atm but I’ll make sure to try out the solution and also put a test page back up as soon as things free up, it’d be great to get rid of those gifs :wink:

Cheers!