Check if svg animation is built?

1

Hi, please help me on this one.

I’m building a svg line animation in Hype with Vivus-script. I now need to make a timeline event when the svg animation is done. How do I do that in hype? I need to check if the svg animation is done and then jump to another time.

Please help :slight_smile:

/Erik

2

did you have a look¿

3

I’ve searched but can’t find anything on how to do what I need. Do you know if I can run a javascript from within the svg file? Like telling the timeline in Hype to continue?

4

Looking at the sample code on the site @h_classen linked to , I see examples like:

<div id="my-div"></div>

<script>
  new Vivus('my-div', { duration: 200, file: 'link/to/my.svg' }, myCallback);
</script>

The documentation says the 3rd argument (using myCallback in the above example) is:

  • Callback to call at the end of the animation (optional)

Thus you can use this to get notified when the vivus animation has ended. This notification can use the Hype API to control animations. By default, Hype puts hypeDocument objects in a global HYPE.documents object for reference. So the vivus script part would look something like:

var myCallback = function () {
    var hypeDocument = HYPE.documents["documentName"];
    hypeDocument.startTimelineNamed("Main Timeline");
}

new Vivus('my-div', { duration: 200, file: 'link/to/my.svg' }, myCallback);

Theoretically this would work from my read of the documentation, but I have not tried it.

If you are just using a pure <svg> tag with the quasi-deprecated <animation> elements, there is an onend handler that you can use (it'd be like <animation onend="mycallback()" .... >) but this doesn't have wide browser support. I'm not sure if there's another way.

5

Thank you for taking the time to answer me. I’m sorry but I still don’t understand… What I want to do is to tell the timeline to continue when the svg-animation is done. Maybe that’s what you’re trying to tell me but I just can’t make that happen.

6

Can you perhaps post your current work in progress that has the animation and any associated .hype files?

1 Like
7

Absolutely. Here’s the Hype-file that I’ve been working with. As you can see there’s a mess… Sorry about that. Maybe you can see what I’m trying to achieve :slight_smile: norrlandsoperan_dans_980x480_new.zip (134.3 KB)

8

Gotchya! I didn’t know the context you were using it in. You’re basically there, just remove this line:

    var hypeDocument = HYPE.documents['documentName'];

It would be wrong (you need a valid name for “documentName”) and isn’t needed. Then it will work as hypeDocument is already a variable available in your code!

norrlandsoperan_dans_980x480_new-fixed.hype.zip (132.1 KB)

9

Great! So kind of you to help me with my animation. Most appreciated. Have a great day/night :slight_smile:

2 Likes