Wix hype iframe reload on enter viewport

[Lee]

I have embedded a hype animation in wix ( https://leojoseph.net/test/test.html ) and tried to make it so that when a user scrolls to the animation on the wix site ( https://leojoseph5.wixsite.com/my-site/manufacturing ) the iframe reloads. I want to do this so that the Hype animation will restart when it enters the view port.

Currently, im using this code within Wix but it doesn't seem to work, is there another approach I could try to get the hype animation to refresh when it enters the wix page viewport?

code used:

export function html1_viewportEnter(event) {
    $w("#html2").src = "https://leojoseph.net/test/test.html";
    setTimeout(() => {$w("#html1").src = "https://leojoseph.net/test/test.html";}, 10);
}

[MarkHunte]

This may help

Note I have not used wix, In my example below we use Jquery.
wix may have its own flavour of jquery that you need to use or override.

In fact I see that you are using wix's jquery $w( )

Jquery Waypoints scroll animations in iframes don't work

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…

---

Having a quick look at the wix editor API

it looks like you may be able to use onViewportEnter( ) instead of waypoints.
You should still be able to add postMessages

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

Description

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window. onViewportEnter() is not fired for hidden or collapsed elements even if they are scrolled into view.

You can also define an event handler using the Properties and Events panel.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context) . To learn more, see here.

And its onViewportLeave( ) api