CMS Development

JLangman
参加者 | Solutions Partner
参加者 | Solutions Partner

HTML 5 animation using Hype Pro

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 いいね!
6件の返信
Anton
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

HTML 5 animation using Hype Pro

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

Anton Bujanowski Signature
Kevin-C
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

HTML 5 animation using Hype Pro

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!

 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
JLangman
参加者 | Solutions Partner
参加者 | Solutions Partner

HTML 5 animation using Hype Pro

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
dennisedson
HubSpot製品開発チーム
HubSpot製品開発チーム

HTML 5 animation using Hype Pro

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 , @alyssamwilie , @daveroma  have any of you used this before?

 

Thanks!

daveroma
トップ投稿者 | Platinum Partner
トップ投稿者 | Platinum Partner

HTML 5 animation using Hype Pro

@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!

 


Dave Roma,
HubSpot CMS Developer

Build a revenue generating website on HubSpot without a developer using The Generator Theme

JLangman
参加者 | Solutions Partner
参加者 | Solutions Partner

HTML 5 animation using Hype Pro

@dennisedson Thanks for sharing with others that may know. Really appreciate it!