HTML 5 animation using Hype Pro

Highlighted
Occasional Contributor

Hi, has anyone had any experience bringing in an animation done in Hype Pro? https://tumult.com/hype/

I have used it for Wordpress but am concerned about how to bring it into Hubspot. I know it generates an html file and then a resource folder with the css, js and any other dependencies (images etc.). I am just not sure if its even possible to bring into Hubspot or if it is, where to start?  

 

Another output option Hype offers is OAM which seems to be useful for a lot of uses but not sure if that could make it easier for using on Hubspot or not. This is the approach used for Wordpress.

 

Thanks for any insight on this.

-Jim

0 Upvotes
6 Replies 6
Highlighted
Community Manager

hello @JLangman , 

I, personally, have not.  

 

Going to throw a few people at this fire to see if we can get someone  with experience with it

 

@Anton , @amwilie , @daveroma  have any of you used this before?

 

Thanks!

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Highlighted
Occasional Contributor
@dennisedson Thanks for sharing with others that may know. Really appreciate it!
Highlighted
Regular Contributor | Gold Partner

@dennisedson @JLangman 👋

 

Chatted with these gents on Zoom yesterday 👨🏻‍💻

 

My gut tells me it's a matter of including the CSS/JS files generated by Hype then adding some custom JS to target the DOM elements we want to perform the animations on.

 

The challenging/interesting piece might be doing this within a Theme - but all things are possible.

 

I'm going to dive into Hype after INBOUND and come up with a more definitive solution for you - stay tuned!

 

Highlighted
Regular Advisor | Partner

Hey @JLangman 

 

I'm extremely interested in what we find out here…I've had hype on this mchine for 2 years and never opened it!

 

Have you looked into using the Hubspot CLI?

I'd venture to bet that you could put together a workflow to take the Hype5 output and get it into the custom module structure for HS to use!

 

 

PS I'm working on a similar workflow for Webflow -> HS. So same, but different. Though the implementation could be similar!

 

Highlighted
Occasional Contributor
Thanks for the idea! I’ll have to see what I can learn about that. Interesting work flow you mentioned.

As for Hype, I have used it for years and can’t recommend it enough. It’s amazing how well it works.

Thanks again!

Jim
Highlighted
Regular Advisor | Diamond Partner

Hi @JLangman

looks very interesting. Will take a look at it. 

 

If you want to display your animations in HubSpot a very easy solution might be:

generate your animations and upload/store them to the file-manager; create a custom module with

<div id="YOUR-ID-NAME"></div>

and

<script>
$( "#YOUR-ID-NAME" ).load("{{module.YOUR-WIDGET-FOR-THE-HTML-PATH}}");
</script>

 after that create a widget in the module. 

possible widgets might be:

- select option(if you have multiple "ready to use" animation in the filemanager

- URL/Link if you want to upload animation

- simple text

 

 

If you go with the select option put the path for the html as value into it. By doing so your content creator(the people who build HubSpot pages) can simply select the animation from a dropdown.

 

If you decide to go with the URL/Link field those content creators can upload the animations by themselfs.

 

If you go with the simple text field option you can place the url to the html file directly into it. 

 

And you could also mix them all together with an if-loop and another select option. 

 

like 

<script>
$( "#YOUR-ID-NAME" ).load("
{% if module.animation_type_select == 'select'%}
{{ module.animation_select_option }}
{% elif module.animation_type_select == 'upload'%}
{% set animation_href = {{module.animation_upload.href}}%}
{{ animation_href }}
{% elif module.animation_type_select == 'text-field'%}
{{ module.animation_text}}
{% endif %}
");
</script>

 

 

best, 

Anton








check Did my post help answer your query? Help the Community by marking it as a solution