How to center a hype animation on a Wordpress page

I could only find two posts about this, neither of which could I follow. I'm surprised the hype plugin doesn't give the same easy Wordpress button for centering text, images, and videos. Or am I missing something?

Hype animations have their container div set to have a margin of auto which generally should be centered by default. Some reasons why it might not be:

  • You have a container div that is not centered or is not the size expected
  • You have CSS that is overriding/interfering with this setting
  • You are using flexible layout and you have not grouped items to be centered as you like

There's probably other reasons. Possible remedies would be making your own div with the same width as your Hype animation and making sure that is centered.

You're also welcome to share a URL where it isn't being centered, and we might be able to provide more clues (though sometimes this is difficult to pinpoint given all the different wp themes and such).

1 Like

Here's the URL: https://fineday.com/

Any help would be much appreciated!

Looking at it now.

Your hype Scene is not set to center it is positioned:
Top:0
Left: 0.

From:
Bildschirmfoto 2022-09-19 um 10.01.07
To:
Bildschirmfoto 2022-09-19 um 10.00.57

In the Pinning Options.

1 Like

Thank you! It worked -the pins needed to be set.
To see my shout out to you and the next Hype problem (which I'll post on the forum tomorrow), please visit: FineDay Academy Technology Department – FineDay.com

1 Like

I spoke too soon!! Centering all the scenes caused a weird problem that the animation disappears when clicking on a button to go to a new scene. Please see Hype Problem #3 for before and after centering example:
https://fineday.com/technology/

1 Like

Will do.

What looks like is happening is that you are jumping to a scene where the height is set to 100%, but no height in pixels is specified on a parent div. Thus 100% of (nothing) is 0.

The ways to fix this would be to not use the 100% scale on a scene, or to have a parent div have a specified height in px.

Let me know if that makes sense and is able to point you in the right direction!

1 Like

Unselecting scale height 100% did the trick! Thank you very much!

2 Likes