Waypoints stop working when embedded

, ,
1

I have created a really nice animation with waypoints that works perfectly until I plug it into my page. The animations still work, but the waypoints dont, and I cant figure out why.

Here is the html of the animation, showing the waypoint working ( added)
Here is the link of the html linked in the iframe.

iFrame code:
<iframe id="iconFrame" width="100%" height="100%" src="http://repcardiff.com/ani/icons.html" frameborder="0" scrolling="no" style="text-align: center; margin: 0 auto; margin-top:50px;);"></iframe>

Website link.

Hype is amazing, I’d love to keep using it but this is a problem I really need to overcome to continue. All help and advice is appreciated.

2

Waypoints currently use the window object, which is the iframe in this case. I don’t consider this desired behavior and have an open issue in our bug tracker for this to work in line with your expectations.

A workaround would be to manually create a waypoint (using the waypoints library) in the parent context on the iframe itself, and then use the Hype JavaScript API to perform animations. Programming required unfortunately.

I’m actually surprised the waypoints library, which Hype uses, doesn’t account for this already.

3

Hi Jonathan, will this be addressed in V4 - looking forward to seeing that in Beta soon Cheers, Michael

4

It may be worth checking this thread out

1 Like
5

Thanks Mark