When you have created one or multiple embeds of a long scrolling page that contain timed animations, you might see a problem. The animations inside the embed could have already started, even before they appear on screen. By default, an iFrame loaded through our embed code is starting directly. This could depend on the type of browser, as Google Chrome is getting more intelligent and only loads the content when it appears on screen (but is not always consistent).
To solve this problem, and start an animation only when it gets on screen, it's possible to add an extra script/plugin to the page. Copy and pase the script below in the footer of the page just once (and only if you are using timed animations inside the embeds).
What it does:
- When the page is loaded, the script screens the pages for available Maglr embeds and directly de-activates (stops) them from loading
- A scroll controller is activated, measuring the scroll position of the page and the locations of the different available Maglr embeds inside the page.
- When one of these Maglr embeds are scrolling into the viewport of the screen, the script will start the embed, showing the timed animation when the complete embed is visible.
Contact our email@example.com for more detailed questions about this integration.