I’m trying to import a project from Tumult Hype (a folder of files that I’ve copied to RESOURCES in Elements).
I’ve created the custom html item on my page, inserted code and edited it to direct to the RESOURCES folder. But no luck, the html item does not appear to be picking up the Hype files. (Even when previewed.)
The attached image shows my code, with my edit highlighted.
Any suggestions would be welcome.
Try dropping the word “resource” and see if that works
Hi Paul. No luck with that. 
Do you have a folder named Curling-infographic.hyperesources in your resources folder? If so, I’d get rid of that period, and I’d rename it so it doesn’t have a “resources” in the folder name.
Hi Thom,
I’ve renamed the folder and edited the html code to match. Still no luck.
My advice when you’re trying to match up your own special code against Element bits is to KISS (keep it simple silly). In other words, don’t put the script down two levels, put it at the top level with a very simple name (e.g. script.js and thus resources/script.js?####). I say that because the more you have to type, the more that syntax, folder dependencies, and typos can get in your way. Your first goal is to make sure that an idea works.
It might also help if we knew what was in the script.
Sorry Thom, I’m way out of my depth. By script, do you mean the html code?
Hi Richard, I made a simple example for you 
this is a 
simple animation made with hype
and here you can 
download a demo project with a custom component (HTML) with a tailwind version of the regular code generated by hype around the script, ( when save also the html file)
When using Tumult Hype animations inside Elements Custom Components, the exported Hype files must be placed inside the /resources/ directory and referenced using the animation folder name
project/resources
└── hype1/ drag here all files
<div
id="index_hype_container"
class="mx-auto relative w-auto h-[600px] overflow-hidden"
aria-live="polite"
>
<script
type="text/javascript"
charset="utf-8"
src="/resources/hype1/index_hype_generated_script.js"
></script>
</div>
To avoid loading and path issues, use simple names for both: The Hype document name, and the exported animation folder name
Recommended: hype1, 2, 3… / heroanimation / productshowcase…
Avoid: Spaces, Dashes (-), Dots (.), Special characters (@, #, &, etc.)
Examples to avoid: hype-animation, hype.animation, my animation..
hope this helps
by default, Hype generates the folder containing the resources with two compound names joined by a period. Simply remove this and update the link with the correct folder name (which should be simple).
Hi Michelangelo,
I really appreciate all of the direction.
I’ve simplified the file name and adjusted the code to better match your example. It’s working now, but only when I preview in a browser, so I’m not sure at what point the problem was actually fixed!
Thanks again, Richard
Many thanks to people like Michelangelo
I’m always impressed when somebody helps me with stuff I just don’t get. Which is often, and I spend way too much time trying to figure it out on my own and I just don’t have the brain power any more 
Aging sucks.
no problem 
, if you have problems with managing the original file, you can send it to me by mail, in case drop me a private message.
I’m also thinking about creating a component specifically for Hype that makes loading animations easier. If you use simple names, it’s possible to create fields, but I’ll have to working on it.
I love hype