Wordpress and hype 3.5

1

Hi
I try to embed a hype animation into wordpress. I use in hype GSAP ,DrawSVG, Tweenmax enz. I see the animation but its not moving/drawing at all. (the good thing is its responsive). What can I do. I try also the plugin, but its not working. I’am not a big code warrior. Is there somebody who has a answer about this.

The embed code I juse below:

div id=“jewel_hype_container” style=“margin:auto;position:relative;width:100%;height:400px;overflow:hidden;” aria-live=“polite”>

2

It would be useful to send a link to the site live and also post a zip of your .hype document to look into further. Thanks!

3

Hi Jonathan,
Thanks for the reply.
The link to the test site is: http://www.annehesseljewelry.com/

And a zipfile:
jewel.hype.zip (180.3 KB)

Thanks again, Peter

4

your wp throws an error in the console …

be sure to include

    <script type="text/javascript" src="${resourcesFolderName}/TimelineMax.min.js"></script>
    <script type="text/javascript" src="${resourcesFolderName}/TweenMax.min.js"></script>
    <script type="text/javascript" src="${resourcesFolderName}/DrawSVGPlugin.min.js"></script>

when embedding and referencing the hype doc in the wp-side …

5

Hi Hans,
Thanks for the responce. I don't understand the reply not entirely
resourcesFolderName? and the path where to put them
my path: <script type="text/javascript" charset="utf-8" src="http://www.annehesseljewelry.com/wp-content/uploads/2016/10/jewel_hype_generated_script.js"></script>

6 
<div id="jewel_hype_container" style="margin:auto;position:relative;width:100%;height:400px;overflow:hidden;" aria-live="polite">
 <script type="text/javascript" charset="utf-8" src="http://www.annehesseljewelry.com/wp-content/uploads/2016/10/jewel_hype_generated_script.js"></script>
 </div>
7

When you export your Hype document to your computer, these lines are included:

<script type="text/javascript" src="jewel.hyperesources/TimelineMax.min.js"></script>
<script type="text/javascript" src="jewel.hyperesources/TweenMax.min.js"></script>
<script type="text/javascript" src="jewel.hyperesources/DrawSVGPlugin.min.js"></script>

You need to make sure those are also included on the page where you embed your Hype document so that the individual JS files can be used.

You should use the full URL, so use http://www.annehesseljewelry.com/wp-content/uploads/2016/10/TimelineMax.min.js or wherever you uploaded those files.

8

Hi Daniel,
Thanks for the responce.
I works fine and smooth. I deed what you said and it works.

Many Thanks for your help, Peter