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


(Gustavo) #1

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.


#2

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.


(Gustavo) #3

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)


(Gustavo) #5

Please!!!


(Jonathan Deutsch) #6

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)