Giving anchor links/hyperlinks to timelines

Hi,

I was wondering if someone can help me or know a way to do this.

Is there a way to anchor link to a page that has a Hype component implemented and when clicked on the anchor link, a specific timeline would play based on the anchorlink?

For example, when a user sees a hyperlink somewhere online and when that user clicks on that link, it would direct him or her to a specific part of the page where the Hype component sits and then it would play a specific timeline.

I apologize if this isn't very clear but any help would be greatly appreciated!

Thank you!

You would need to run code to get the location hash. Then use that as a condition to run a timeline.

A very quick example. This would be put in a On Scene load Javascript Action

	var thisAnchor = window.location.hash
	
	
	switch(thisAnchor) {
  case '#test1':
  hypeDocument.startTimelineNamed('test1', hypeDocument.kDirectionForward)
    break;
  case '#test2':
   hypeDocument.startTimelineNamed('test2', hypeDocument.kDirectionForward)
    break;
  default:
     
}

And as @danial mentions below..

If you have scenes that you are directing them to then you will also need to setup more code, re his instructions

Here's how you can get someone to an individual scene by using hashes (@markhunte mentioned above): Linking to a specific scene from inside and outside of a Tumult Hype document

For linking to a timeline, is this a button where the Hype animation is already embedded or is this a link to a new webpage where the animation is embedded?

The basic code for a button outside of Hype which you want to control a HYpe embed looks like this:

<button type="button" onclick ="HYPE.documents['scenes-transitions'].showSceneNamed('Scene2',HYPE.documents['scenes-transitions'].kSceneTransitionPushRightToLeft);">
   Show Scene 2 (Push Right to Left)
 </button>

(This is via this part of the documentation)

1 Like

Thank you for your reply Mark!

Hi Daniel, the specific hyperlink will direct the user to a page with the Hype component embedded on the middle of the page. But while the link directly takes the user to the Hype component on the middle of the web page, the component also needs to play a specific timeline.

Would something like this be very complicated to set up? I'm sure it's doable by all the wizards in this forum :slightly_smiling_face:

Just to clarify.

You have some non hype webpage, with a link
The link can be on any webpage on the internet and be used to take the user to your hype webpage somewhere else on the internet

You want the link to have a hash/anchor.
The Hype page will play a timeline depending on the anchor.

Or

you have a single webpage with a hype project embeded on it.
On this single webpage you also have links that you want the user to click to start some timelines on the embeded hype project

if the former then I think my answer will work for you. The hash will take the user to the correct page with the embed. But so long as the Hype project is not emebeded as an iframe. The hype project should see the location.

If the latter then you would need to look at what danial is saying.

Hey Mark,

Yes, it's the former! How I even start to set this up? An example file or any kind of example would be super helpful!

And again, thanks for your reply!

hash.hype.zip (22.3 KB)

I have added a couple of buttons so you can test while previewing.
The buttons ids are used in the test to add an anchor to the previews location. This is just to simulate someone coming to your page.

I have not tested anything outside of a preview...

1 Like

Thank you Mark!

I'll try this out and see if I can make it work :slight_smile:

1 Like