Fullpage.js: Svelte/Sapper Support or Example.

[safaiyeh]

Description

I am trying to integrate fullPage.js with Svelte. I've bumped into many roadblocks. Could there be a community supported example? Or maybe an investigation to what is needed to support it well.

Mainly around not being able to initialize on DOM loaded.

[alvarotrigo]

No idea what Svelte is :)
Have you tried asking in their communities ?

fullPage.js is just a JS library, it should be able tot be used anywhere as long as you follow the required structure and initialise it as detailed in the the fullpage.js documentation.

Let us know when you find the way! ;)

[safaiyeh]

@alvarotrigo

The biggest issue was Svelte will mount components after the dom is ready. I initialize fullpage when the component is mounted.

This would cause a flash of the layout. I styled the page with 100% heights as a preload so the flash does not occur. However, I do not think that is a good fix especially if there could be more custom sizing of the sections.

What other work arounds could be helpful for this?

[alvarotrigo]

Can't really say without a reproduction, but having 100% height for all fullpage.js elements seems reasonable.

See this topic

[samcreate]

Here's a working example for anyone looking:
https://codesandbox.io/s/new-cookies-gyksv

[alvarotrigo]

Awesome! Thanks for that @samcreate ! 👍

[samcreate]

Last one:
https://github.com/Hejtmus/svelte-fullpage