Embedding Hype animation on Squarespace

I’m having some trouble getting a Hype file to work on a Squarespace site according to the suggested instructions.

I’ve embedded the suggested code from the instructions above (adjusted with my details) referencing the Hype Generated JS.

No matter what I do I’m getting the following error in the console:

Uncaught TypeError: Cannot read property ‘setAttribute’ of null
at Array.k (dmcnopeninglogoanimation_hype_generated_script.js:6)
at HYPE-598.thin.min.js:108
at HYPE-598.thin.min.js:108
at HYPE-598.thin.min.js:108

I’ve tried to find something on the forums and Google and found this thread that described a similar error but doesn’t seem to have a solution I can use… Would appreciate any and all help!

The problem is that you do not have a div with the id that the hype loader is expecting. It is expecting a div like "dmcnopeninglogoanimation_hype_container" but looking where it is, I see what is probably “test”:

I suspect what you need to do is copy/paste the entire three lines of code from the exported .html file (the div, script, and close tag) in its entirety and then it should work. The instructions link you posted shows more of how it should look.

1 Like

Hi Jonathan, thanks for the reply!

I slapped my forehead when I realised that was the bit I needed to change. I updated the code in the embed block and am no longer getting the error however the Hype animation isn’t appearing at all.

I built a super simple Hype animation (red background with a white box floating across) in case the previous one was too complicated but am still having no luck getting it to appear…

It Looks like it is because block content div’s height is set to Auto.

When I manually changed it in the browser inspector.


I get the project showing.

Not sure how you change that in Squarespace…

1 Like

Thanks for identifying the issue Mark!

Not sure why but including the height value in the code block did nothing so I had to inject the CSS targetting the DIV (#test_hype_container) in the header of the page using the Squarespace ‘Advanced’ tab. Currently I have the animation appearing with a 400px height and will now be working on how I can get the animation to resize and be properly responsive…

2 Likes

For anyone who comes upon this thread, the closest I have been able to get the DIV housing the Hype animation to have a responsive height in Squarespace was to use adjusted CSS code from a mixture of:

I put the Hype animation DIV inside an ‘Outer’ DIV which itself sits inside a ‘Wrapper’ DIV and set the height value of the ‘Outer’ DIV using the Viewport Width ‘vw’ value which resizes the DIV in a seemingly respionsive way. Currently the code looks like this:

#wrapper {
  width:100%;
  max-width:1920px;
  height:100%;
  margin:0 auto;
}

#test_outer {
  position:relative;
     height: 30vw;
}

#test_hype_container {
  margin:auto;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  overflow:hidden;
}

As a casual tinkerer in CSS I have no idea how optimised this is but it works! Next step is to try a more complex animation with interative elements…

2 Likes