Embedding Hype animation in Revolution Slider / Wordpress

1

hello - i love the look of this software and believe i can actually create the animated elements i need on my sites without outsourcing to a programmer. i have extensive experience with flash and this looks quite similar.

my question however relates to integration with wordpress. i have seen examples of it being used - but i have a specific situation.

i am working on a site that uses a fullscreen revolution slider that plays a self-hosted video. on top of this i would like to add a layer that shows an animated logo that is interactive. the slider does let you add layers - such as images for example. so am i able to use a Hype animation in this scenario?

thank you and i look forward to any information you can provide.

Mark.

1 Like
2

It appears that there is a special slider type called ‘slide extra elements’ that supports embedding external HTML content (like videos). Check this out: https://forum.pagelines.com/topic/29886-how-to-embed-video-in-revslider/?do=findComment&comment=175617

Do you see that option?

To use that, you will first need to host your Tumult Hype document somewhere on the web, and you can use its embed code to display it within your slider. This video shows how to embed your Hype document elsewhere:

1 Like
3

hi Daniel,

that seems quite reasonable. i noticed the slider i use has a layer you can add an html snippet to so i am reasonably confident it should work.

apologies if this is a silly question, but given wordpress uses a substantial amount of javascript, especially the theme i am using (avada); is there any risk that this could conflict with other elements on the site?

ideally, is there a way i could test a basic animation on my site that has been built with Tumult?

thank you.

4

If you mean existing sites. checkout the Gallery The UFO may be a good one http://tumult.com/hype/gallery/UFOAbductionDemo/UFOAbductionDemo.html

There is also Hypedocks

5

Definitely. You can copy and paste this Hype animation from our Gallery which is a bit small than the one @MarkHunte mentioned

<div id="spideranimationsasha_hype_container" style="margin:auto;position:relative;width:480px;height:500px;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="https://tumult.com/hype/gallery/SashaSpider/Spider_animation_Sasha.hyperesources/spideranimationsasha_hype_generated_script.js?26952"></script>
</div>
2 Likes
6

hi Daniel,

that worked! just a couple of things i could not test with the sample but i assume this is a setting in the file. so you get an idea of what i am trying to do please see:

http://imtram.com/test/

this is a very basic setup and only being used as a test - but the end result will be a full page video background with an interactive logo (developed in Tumult) in place of the spider demo.

my queries are:

  • can the logo background be transparent?
  • is it possible to make the logo responsive - ie resize with the slider / screen size?

thanks very much. these last 2 points will give me the confidence to use your software for this and future projects.

7

You would check 'Make background transparent' prior to exporting. This doesn't export the scene background color.

This may be trickier, but here's an example: Spider_animation_SashaResponsive.hype.zip (202.5 KB)

And here's embed code you can try:

	<div id="spideranimationsasharesponsive_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
		<script type="text/javascript" charset="utf-8" src="http://tumult.com/support/examples/6553-responsive-spider/Spider_animation_SashaResponsive.hyperesources/spideranimationsasharesponsive_hype_generated_script.js?70814"></script>
	</div>
8

hi Daniel,

please excuse my ignorance - but what do i do with the zip file? i assume i need to upload to the server, but i am not sure where.

i appreciate your help. thank you.

9

The Zip file is just the file I used to generate the embeddable script. To test a responsive Hype document on your server, you would just copy and paste the code I pasted above.

I hosted it on our server so you don't need to mess around with uploading yourself. To use your own document, you would need to upload your Tumult Hype document to your server and modify your embed code to point to the generated JS script on your server. Here's a detailed video about how that works:

10

hi Daniel,

i see - thanks for clarifying. after inserting your new code, the spider no longer shows at all.

http://imtram.com/test/

is there another option i can try?

cheers.

11

eitheryour hypecontainer or the hydoc itself needs an absolute height.
you’ll get many topics in the forumsearch on this …

12

hello Hans,

thanks for the information. so is there a sample hype file i can use that has these attributes so i can test it on my slider? i am still reluctant to buy until i can see it actually work in the environment i am using.

thank you very much.

13

You can just change the height within the div that has an ID ending in _hype_container

Here is a screen shot pointing to the information:

TEST - Imtram Google Chrome, Today at 02.23.38.png1257×641 596 KB

14

hi DBear,

i have tried this - but the spider did not show up at all. which is why i added min-height - just so i could see it.

if you look now i have the spider width and height at 100% but it only shows the min-height.

thanks.

15

mainly two ways to be responsive within hype.

  1. layouts
    you’ll make adjusted content for several width-breakpoints (as much as you like)
    those have a fixed height -> they’ll fill the space given

this’ll be the choice if you include the hype-elements within a container that provides 100% -> like in your example

  1. height responsive setting
    this adjustment will have a height of 100% of the viewport (spiderexample)
    won’t work in your example because the height of your container will be 0 and even if hype requires 100% of it, it keeps being = 0 :slight_smile:

***those are the mainconcepts, there are many in between possibilities with some knowledge in html, css and js

16

hello Hans,

ok - it looks like i will need to create my own document to fit my needs. i think the breakpoints sound like they will work,

thank you for your help and i look forward to using Hype.