Play timeline with a different URL e.g. www.mysite.com/play2ndtimeline

1

Hi,

I’m not sure if this is possible, but I’ve created a website that (unconventionally) works with different timelines in stead of separate html pages. This is because I want to control how each page comes into view. I know this is a terrible idea in regards to standards… but,

Is it possible to trigger timelines from the websites url- thus linking to different parts of the website when actually just different timelines are played?

Thanks- even a short “no” is fine.

2

Not in Hype itself. You would have to control the URL redirection outside of Hype. Unless you use query strings or a hash manipulation technique. So, your url would look like

http://www.my-web.site/index.html?query=play2ndtimeline
or
http://www.mysite.com/index.html#play2ndtimeline

Then using code you would get the string you want to use and compare it against a conditional statement and play the corresponding timeline.

In order to have a URL that looks like http://www.mysite.com/play2ndtimeline you would need to do more outside of hype to control / manipulate the URL and redirections. Using .htaccess or PHP or creating folders with separate index.html 's that redirect to the main doc. etc, etc

3

Thanks, I don’t mind what the url looks like at all- just after the simplest solution to be able to link to specific parts of a number of hype documents all on the root page.

This is outside of my coding expertise- but thanks very much for the reply.

4

If you have more than one Hype document on the page then having a URL like

…/play2ndtimeline

I envisage as being extremely difficult as how would you determine which document would play this “query”?

Seems to be a lot of work when another approach may be better and more efficient. And, also being outside of your “coding expertise” is gonna throw up challenges big time as any suggestions are going to complicate matters.

My suggestion first is to break your document down to a simple 1 query and a couple of documents and then share here so that we may see what you’re intending to do. And, then, maybe we can offer some solutions.

In short, upload a basic example so that we can see what you’re wanting.

5

Maybe I’m oversimplifying things here but how about making each different “HTML” page a different scene?:face_with_raised_eyebrow:

6

As an example of this.

You can initiate some global functions in your hype documents on a scene load Action > Run Javascript function

Like here
In Hype doc 1

 window.timelineOvOne = function (text) {
    
    hypeDocument.startTimelineNamed('expandOvOne', hypeDocument.kDirectionForward)
     
}

window.timelineOvTwo = function (text) {
    
    hypeDocument.startTimelineNamed('expandOvTwo', hypeDocument.kDirectionForward)
     
}

In Hype doc 2

 		window.timelineRectOne = function (text) {
    
    hypeDocument.startTimelineNamed('expandRectOne', hypeDocument.kDirectionForward)
     
}
	
	window.timelineRectTwo = function (text) {
    
    hypeDocument.startTimelineNamed('expandRectTwo', hypeDocument.kDirectionForward)
     
}

Note you are not limited to the number of global functions you add to each doc.

In the head of the parent doc.

 <script type="text/javascript"> 

        
      var hash = window.location.hash.substring(1); 
      
       setTimeout(function(){ 
	
            if  (hash === 'one'){
            window.timelineRectOne()
            window.timelineOvOne()

            } else if (hash === 'two'){

            window.timelineRectTwo()
            window.timelineOvTwo()
        }
	}, 50);
    
    </script>

So if the url end in #one we get timelines 'xxxOne' run in the docs.

or #two we get timelines 'xxxTwo' run in the docs.

Also not I put the main head code in a timeout. Which gives the HypeDocuments time to load and init the global functions. (HypeDocuments load after the head code runs, so we have to wait a bit )

Example

hypeExternalTimelines.zip (190.3 KB)

This is all simplified and noting @Dbear words, even this is actually complicated with out scripting knowledge and is posted to show things can be done,

So yes give us something to work from and some one may be able to help you along better.

7

Here is a very simple example of the kind of documents I’m working with. There are more hype docs involved, but essentially imagine something on the end of the url that allows for all timelines to play depending on which box you want to see and the menu also updates. I’m happy to take suggestions which involve rebuilding the site- but I’m after a very visually rich website and having different elements shift around on menu clicks works well for this.

example.zip (192.3 KB)

8

Thats an option, but with scenes you have a much more limited way of transitioning between them. Other way is to have separate html pages, but then I lose the reactive nature of using timelines. Thanks.

9

Thanks MarkHunte, as you can see above I posted a simple example now.

10

@mirrorforthestars
You are not limited to Hype's baked-in transitions. Attached is a "roll your own" demo of a "slat" transition (or "vertical venetian blinds" if You prefer).

Slat Transition v2.hype.zip (595.6 KB)

Video output of the above demo...