Start Timeline from a SVG

Using JavaScript with Hype
1

Hi

I am a graphic designer and illustrator and enthusiastic hype user, but not very skilled in coding. I searched the forum but couldn’t find an appropriate case. I would like to start a timeline (diagram) from the several states of the map (svg) on click and make it disappear on mouseout or a second click. I think this case needs some javascript coding. Please see also the attached file.

Appreciate any help very much!

Claudio

chkarte_animiert.zip (362.4 KB)

2

Your document has the means already for a click event setup. You would just need to follow the same logic and use Hype's API to start a timeline.

click1.onclick = function () {
    alert("Wallis 55");
    // hypeDocument.startTimelineNamed(timelineName, direction)
    hypeDocument.startTimelineNamed("YOUR TIMELINE", hypeDocument.kDirectionForward)
}

I notice you have a symbol and you have a function you have setup to control the playback of the symbol. You can also use the API to call this function if you so wish.

click1.onclick = function () {
    alert("Wallis 55");
    hypeDocument.functions().diagramme(hypeDocument, element, event);
}

Note you must pass in the arguments (hypeDocument, element, event) or you will get an error.

EDIT: I have done a refactored version of what you had to help you on your way.

  1. I made it a bit more streamlined and reduced the repetitive code
  2. The "kantonalbanken" code now runs on mouseover of the main element and gets the polygons, paths and polylines of the svg and adds the appropriate listeners which then run the appropriate functions underneath.
    • changeBG()
    • showDiagram()

This mean that the different states will change colour on mouse over and mouse out and if you click those states it will run the showDiagram() function which in turn runs the diagramme() function using the API (as referenced above)

Look through it carefully so you may learn what I've done. If you have any more issues let us know however, the rest should be straight forward Hype stuff to show an animation on click. :wink:

chkarte_animiert-vDBear.zip (366.9 KB)

2 Likes
3

Hi DBear,

wow, thank you so much for your quick and profound answer. Yes, I will study your solution very curiously. I am sure it will bring me further regarding Hype&Javascript…! :grinning:

So long and best regards
Claudio