How do I control (play and pause) on a time line that is inside the HTML Widget?

I have a hype document with a button and an html widget (another url animation made in Hype). How can I control the time line within the Widget? Continue the timeline and also Continue reverse line line for example.

This requires enabling ‘postmessage’ between your framed element and the element controlling it, similar to: How to Load and Unload (or Reset) Embedded Hype Widgets

Once you enable the link, you can use regular Hype API commands to target the element within the frame.

I saw this example but as I am not aware in programming I have difficulty adapting to my need. I can not show the project yet, but I did an identical example of my need. Could you help me by showing me in my example? The idea is a file that receives and controls the other HTML.

Please!exemplo.zip (218.7 KB)

Please!!!

My solution is pretty similar to the code from the other forum post; it operates on the same principle with Custom Behaviors. Here’s what I did:

  1. I added two custom behaviors to the animation.hype (child) document that will continue the timeline (“continueTimeline”) and continue the timeline in reverse (“continueTimelineReverse”)
  2. On the same animation.hype I added the code from the other post to the head
  3. On the controls.hype, I added the triggering code with a change in how it finds iframes (as a button triggering is different and wouldn’t work right) and replacing the customBehavior names. Each button uses the same code but with the customBehaviorName being different.

I’ve attached the documents:

parent-child.zip (398.3 KB)

(Also note that I changed the iframe to just be “animation.html” so you’ll need to export both together)

2 Likes