If I have understood this correctly then this is pretty easy to do.
First you need to remove the waypoints from the iframe’s hype document and place them in the parent/index.
This is how.
1, In the index.html, give the iframe an id. we use ‘iframe’ in this example
<iframe id='iframe' style="position: absolute ;" src="./waypoint_iframe_raaskot.html" scrolling="no" style="height: 3900px;" width="100%" height="3900px" frameborder="no"></iframe>
2, add the jQuery and waypoint links to the head of the index.html.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
I will explain the first waypoint, repeat these next steps for each waypoint/animation ,
3, add a div to the index.html.
<div id='illu_scroll_05' style="position: absolute; top: 1602px;"> </div>
-
give the div the id for your waypoint
-
set the style attribute position to absolute.
-
Go to the waypoint_iframe_raaskot Hype project.
Select the first animations and get it’s top position pixels. -
set the top of the div in the index.html to that number. (or as I have done here the middle height of the animation element)
We can do this because the iframe will be 100% height of the parent (index.html) height. So the top will be the same as if it was in the parent.
4,We will now be adding some more javascript into the head of the index.html .
Make sure that this new code is inside a document ready function. Like so:
<script type="text/javascript">
$( document ).ready(function() {
//-- ADD WAY POINTS HERE;
});
</script>
5, add a waypoint for the div you just made inside the document ready function.
$('#illu_scroll_05').waypoint (function(){
document.getElementById("iframe").contentWindow.postMessage(['pcall', 'illu_anim_05'], '*');
}, { offset: 'bottom-in-view' });
The way point will postMessage to the iframe. Set the message to the name of the animation element. 'illu_anim_05’
repeat from step 3 for each animation.
5,
In the waypoint_iframe_raaskot Hype Project.
Remove all your waypoints from the waypoints function.
Add the listener code and the switch code which should be set up to switch for each postMessage sent
In this example I have setup just the first two.
window.addEventListener('message', function(theEvent) {
if (theEvent.data[0]=== 'pcall' ){
switch(theEvent.data[1]) {
case 'illu_anim_05':
hypeDocument.startTimelineNamed('illu_anim_05');
break;
case 'illu_anim_06':
hypeDocument.startTimelineNamed('illu_anim_06');
break;
}
}
}, false);
Example.
waypoints_postMessage_MHv2.zip (676.7 KB)