Jquery Waypoints scroll animations in iframes don't work

Using this is very straight foreward: http://hype.desk.com/customer/portal/articles/1438517-starting-an-animation-by-scrolling-to-it-with-jquery-waypoints-

  • yet the jquery waypoint animation by scrolling fails to work when loaded in iframes: All animations will act like exposed only one-time when displayed - as if the iframe itself is the very window object discussed here:
    Waypoints stop working when embedded

I have two questions:
(1) Does there exist any updated example file that takes iframes in consideration? – or
(2) a step-by-step workaround on how to manually creating a waypoint (using the waypoints library) - as a non-js-expert and as mentioned in the second url above?

Kind regards, Mikael

1 Like

Hmm, postMessage seems to be the saviour this month.

A work around is to put a waypoint element on the parent.

When the parents way point is triggered it runs a javascript which send a message to the iframe.

The iframe will then run a function that runs any of the normal Hype API functions.
The message can be targeted at a switch so you can use multiple postMessages with different ‘messages’ to run different functions.

Waypoint_postMessage_to_iFrame.zip (222.7 KB)

2 Likes

This is happening because I believe both jquery waypoints and Hype waypoints only consider their own document and don’t look up through the parent documents to figure out when they are exposed. Thus if it is shown in the iframe immediately it will be triggered immediately. @MarkHunte’s solution is probably the easiest way to get it working.

1 Like

Thanks a lot for your kind responses. Any response is appreciated dearly, but still I have some questions (sorry for the lengthiness – see at the end):

And please excuse me that I perhaps get your instructions – and the nice hype-file – all wrong (I openly admit: js is not my turf!).

But it seems to me, that the “Waypoint_postMessage_to_iFrame”-file is designed to load “innerframe.html” into an unique id element named “iframe” in an html-file called “parent.html”. Right?

When loading “parent.html” in a iframe on a remote page it still wont work, like this “http://raaskot.dk/raalab/ase/waypoint-iframe-raaskot/iframe_setup_01/index.html

If I load it in a new iframe deployed on another server (with an external link) the problems still persist: the animations will only run once due to the iframe issue.

Yet my wish is (as mentioned) to display the entire hype project in a remote html-iframe (non-hype generated) maintaining the scroll effects like this example (where the hype effects is lost):
http://raaskot.dk/raalab/ase/waypoint-iframe-raaskot/iframe_setup_02

It should work like this non-iframe example here: “http://raaskot.dk/raalab/ase/waypoint-iframe-raaskot/iframe_setup_02/waypoint_iframe_raaskot.html

A hype-compilation of the above: “http://raaskot.dk/raalab/ase/waypoint-iframe-raaskot/iframe_setup_02/waypoint_iframe_raaskot.zip

Questions:
(1) Is my above linked waypoint setup suited to be modified with the functions found in the “Waypoint_postMessage_to_iFrame” – and – excuse me that this question somehow gets extensive :frowning: – where to drop the string-blocks in Hype?
(2) Can the script (“postMessage”) used in “parent.html” also be utilized in the index.html (the one with the iframe-tag) – if you understand?

Kind regards and with thanks! :slight_smile:
Mikael

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)

3 Likes

Amazing!

Dear Mark
Yes you have understood this correctly! And thanks alot that you offered to have a look on my project!

I’m fascinated and utterly impressed by the creativity your code suggestions and the didactically approach in your instruction – and indeed very transparent information which I could implement so nicely here:
http://raaskot.dk/raalab/ase/landingpage-121/

Yet I understand – with so many timelines I’ve piled up – it’s imperative to have a systematic logical ID naming structure – else things easily get messed up. That happened for me once (of course) but things worked out fine at the end.

Concerning also your note “iframe will be 100% height of the parent … index.html” its quite straightforeward to adjust the positions of the waypoints (when to execute the animations). If the hype-project is loaded on a remote page with menus and text headers you add the necessary offset in pixels.

Keep in mind, though, that things (the abovementioned positions of waypoints) are altered when responsiveness is concerned and the project is scaled.

I tried to experiment with procentual values but couldn’t make it work, yet for me this is a minor thing: the animation will eventually appear when scrolling. Whether its exactly at the bottom this is not crucial at the moment.

So, again: your help has been paramount!

From a thankfuld individual out there:
Kind regards from Mikael

2 Likes

Correct, I should have added I was only going by what you had in your setup and it is easy enough to adjust for instance if the iframe's top is 100 pix below the parents windows top (0) then you just add 100px to the waypoint pixel top number total.

As for responsive... thats a whole other ball game as you discovered. I guess there may be a way to have the parent change the top of the waypoints when the page/layouts change..

Glad it all helped.

1 Like