Adding your Tumult Hype animation to a Wix.com site

[willhamlyn (Will)]

OK I can see that that works but not sure how you are exporting this, I only have the option to export as a folder containing images, scripts and fonts etc. That gives me something like this:

<div id="ccintroanim_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
	<script type="text/javascript" charset="utf-8" src="CC_intro_anim.hyperesources/ccintroanim_hype_generated_script.js?35571"></script>
</div>

<!-- end copy -->

Your export seems to have all the transformation info included?

Also I can see this might work for a simple spinning image but when it is something like a gallery with multiple slides and different timings and transitions then surely it will need the javascript?

I have found a way to create a folder within Wix that I can create .js files into but I can't add the images or other files to this so it's missing half the resources.

I'm not sure what you mean by exporting in the advance using the CDN as a flat file? I don't see to have that option? I'm using Hype 4 pro.

This the error I get:

There was an error in your script
ReferenceError: Can't find variable: React

It's trying to run it as the container loads and shows the background colour set in the css but after maybe a second I get the error which I'm guessing is wix blocking the external link to the js file on my server.

[MarkHunte]

Tumult Hype

Can't remember where the FlatAssets on originated.

Websites not showing anything

Not that I can see. There is an export script that lets you export a project into a flat sing folder. FlatAssets.hype-export.py.zip. The main thing it does is set the linking to files correctly for the html file to be in the same directory as the assets and the assets in the same directory and linked correctly. If you are able to install the export script or have it already. I have created a simple project with it and the moved the html outside of it and re pointed the path to the flat folde…

[MarkHunte]

Also. Did you try it how @Daniel suggested

Just embed the copy code into your HTML embed but edit it to use the full url

	<!-- copy these lines to your document: -->
<div id="ccintroanim_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
	<script type="text/javascript" charset="utf-8" src="https://www.zincc.com/ws/anims/CC_intro_anim.hyperesources/ccintroanim_hype_generated_script.js?35571"></script>
</div>

[willhamlyn (Will)]

Hi Mark do appreciate your ongoing efforts to help with this! I tried the full url option but Wix seems to block access to externally hosted folders and scripts.

That just gives me the error I mentioned above.

I downloaded the python file you linked but that just gives a text file that I couldn't install. On searching the forum I found Daniels post with the Python installer package. Downloaded and ran that, restarted hype and my Mac but still no export options under advanced. and it's. not showing under export scripts? I'm using Monterey 12.6.9?

I downloaded the double click script and that went straight in
Not sure what I'm doing wrong

[willhamlyn (Will)]

Ah ok I see I drag your file to the folder accessed via preferences! Ok will try that.

[willhamlyn (Will)]

Ok that works now, exported using FlatAssets but please excuse me if I'm missing something here and being really stupid but all that seems to do is put the html file within the resource folder? not sure how that would help with the access problem? Wix won't allow the creation of a resources folder that contains multiple file types or access to external code so I'm still in the same situation.
I still cant figure out how you got your animations to embed with the extra data included in the embed code?

[MarkHunte]

Lets step back a bit.

With your hype project with its layout break points

If you have your own server space ( not part of wix )
Simply upload all your files there.

Then in wix, add a HTML embed and use the site field to point to the projects html.

The Wix HTML embed break points seem to honour the parent wix sites break points.

See the test site

https://dipole-speller-0m.wixstudio.io/hypetest

---

Now as I mentioned in the older wix editor you will not see an option for break point. And I do not think a site created originally with it and later opened in Wis Studio edited will also. The site needs to have started of in Wix studio.

---

If you do not actually have your own server to upload to that is not part of wix. Please make that clear here.

[willhamlyn (Will)]

That's perfect. Yes have my own server, I could always see that an iframe would work technically but my question was would it be responsive in line with the wix breakpoints (assuming they were set to match in Hype) when I've tried it before it never worked properly and you ended up with scroll bars randomly appearing which just looks amateurish on a professional site. I hadn't tried this with the new studio editor hence my original question. (and Wix support basically telling me it wouldn't)

I've duplicated a simple slideshow at my end and embedded it and it would appear to work as expected which is great so thank you for bearing with me!

[MarkHunte]

Just make sure you look at it in other browsers.
I only saw scrollbars in other browsers before I realised I had them (safari£
I wlll likely use css on the page code to stop them showing.

[Daniel]

If anyone's reading this and they don't have a server, I recommend using Netlify or Cloudflare pages for quickly getting a Hype document online.