Start an HTML Animation on View (for MagPlus)


I’m working with Hype 3.5 Pro and I want to embed an HTML animation (made with Hype) in a Magplus Designd project.

Everything works fine between Hype & Magplus, but I want to make some ‘changes’.

I have an animation in Main Timeline (always autoplay) and It’s fine for me, but I want that the HTML start when the HTML is displayed on screen, I mean: “on View”.

If you read that post: you can see how Magplus pre-load some pages/verticals each time so… when i arrived to my vertical (where I have my Hype project embeded): the animation is over!!

How can I fix this? I’m trying to implement the onViewEnteredInside() function but it’s not working… I don’t know what I’m doing wrong, but it doesn’t work. I don’t know if the function isn’t working anymore or if I’m doing something wrong in Hype document…

Could you please attach some “super simple” hype project (with the function, all right…) so I can confirm I’m doing well with my project?

Thanks in advance!!



(Freelancer) #2

@mcs -

I’m not familiar with Magplus but here’s something that might be helpful… Instead of putting your main animation in the Main Timeline, you can put it in a new timeline and have that timeline play when an element enters the viewport. This is done with the “On Enter Viewport” action, found in the Actions Inspector:

That element could be an invisible element on the main scene, or an element that’s outside the scene boundaries and therefore not seen.

Check out the documentation on Viewports here:

Hope this helps… John


Hi John, thank you for your reply.

Unfortunately, your suggestion it doesn’t working because, for magplus, “the viewport” starts in the preview vertical (as they explain in this link).

So I guess the only solution is by any javascript function or code…

Anyone can please help me? :confused:

(Mark Hunte) #4

To be honest helping with propriety software like this is a little hard for many of us as we do not have it.

The main issue here seems to be with how Magpies deals with Hype.

I think your best bet is to ask on their forum for help with the Hype vertical code.

Also here is a re formatted version, the copy and paste from the link you gave is a bit jumbled up and may mean you have syntax error.

//    HYPE.documents["version1"]

var init = false; function onViewEnteredInside(){
if(init) return;     init = true; (function HYPE_DocumentLoader() {
                                   var resourcesFolderName = "version1_Resources";
                                   var documentName = "version1";
                                   var documentLoaderFilename = "version1_hype_generated_script.js";

    // find the URL for this script's absolute path and set as the resourceFolderName

try {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var scriptSrc = scripts[i].src;
        if(scriptSrc != null && scriptSrc.indexOf(documentLoaderFilename) != -1)
            resourcesFolderName = scriptSrc.substr(0, scriptSrc.lastIndexOf("/"));

catch(err) {    }