How to use fullpage js with webstudio

[benjaminpreiss]

There is something called fullpage js created by Alvaro Trigo that creates a slide effect on scroll. I now want to implement the following page:

https://susanne-preiss.de

Can I do that with fullpage js?
It seems the HTML embed code fails.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.js" integrity="sha512-212XzBn0s4WIDgCVdotpEppK681Cn9mMTDC70bt0kp3JSU+Mpm2W0/nxu0/pXLICm3guSIRnZFSQ3vSFJ6W+Tg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
      var HEADER_SEL = ".header";
    var TOP_NAV_TOGGLE_SEL = ".topNavToggle button";
    var TOP_NAV_TOGGLE_BAR_SEL = ".topNavToggle .bar";
    var TOP_NAV_TOGGLE_FST_SEL = ".topNavToggle .fst";
    var TOP_NAV_TOGGLE_SCD_SEL = ".topNavToggle .scd";
    var TOP_NAV_TOGGLE_THRD_SEL = ".topNavToggle .thrd";
    var TOP_NAV_TOGGLE_DIV_SEL = ".topNavToggle";

    var BOTTOM_NAV_TOGGLES_SEL = ".bottomNavToggles";
    var BOTTOM_NAV_TOGGLES_CHILD_SEL = ".bottomNavToggles button";
    var BOTTOM_NAV_TOGGLES_COLORED_CHILD_SEL =
    ".bottomNavToggles button.impressum, .bottomNavToggles button.datenschutz, .bottomNavToggles button.kontakt";
    var OPEN_KONTAKT_TOGGLE_SEL = ".kontakt.open";
    var OPEN_IMPRESSUM_TOGGLE_SEL = ".impressum.open";
    var OPEN_DATENSCHUTZ_TOGGLE_SEL = ".datenschutz.open";

    var CLOSE_BOTTOMNAV_TOGGLE_SEL = "footer button.schliessen";

    var IMPRINT_TOGGLE_SEL = ".bottomNavToggles .impressum";

    var CLASS_NAV_OPEN = "nav-open";
    var CLASS_NAV_WHITE = "nav-white";
    var CLASS_HEADER_OPEN = "head-open";
    var CLASS_KONTAKT_OPEN = "kont-open";
    var CLASS_IMPRESSUM_OPEN = "impressum-open";
    var CLASS_DATENSCHUTZ_OPEN = "datenschutz-open";

    var SECTION_NAV_SEL = "#fp-nav ul li a span";

    // add eventListeners
    function addSharedEventListeners(STARTPAGE) {
    document.querySelector(TOP_NAV_TOGGLE_SEL).addEventListener("click", () => {
        headerToggle();
    });
    document
        .querySelector(TOP_NAV_TOGGLE_SEL)
        .addEventListener("mousedown", () => {
            document.querySelectorAll(TOP_NAV_TOGGLE_SEL)[0].style.outline =
                "0";
        });
    document
        .querySelector(OPEN_KONTAKT_TOGGLE_SEL)
        .addEventListener("click", () => {
            kontaktToggle();
        });
    document
        .querySelector(OPEN_KONTAKT_TOGGLE_SEL)
        .addEventListener("mousedown", () => {
            document.querySelectorAll(
                OPEN_KONTAKT_TOGGLE_SEL
            )[0].style.outline = "0";
        });
    document
        .querySelector(OPEN_IMPRESSUM_TOGGLE_SEL)
        .addEventListener("click", () => {
            impressumToggle();
        });
    document
        .querySelector(OPEN_IMPRESSUM_TOGGLE_SEL)
        .addEventListener("mousedown", () => {
            document.querySelectorAll(
                OPEN_IMPRESSUM_TOGGLE_SEL
            )[0].style.outline = "0";
        });
    document
        .querySelector(OPEN_DATENSCHUTZ_TOGGLE_SEL)
        .addEventListener("click", () => {
            datenschutzToggle();
        });
    document
        .querySelector(OPEN_DATENSCHUTZ_TOGGLE_SEL)
        .addEventListener("mousedown", () => {
            document.querySelectorAll(
                OPEN_DATENSCHUTZ_TOGGLE_SEL
            )[0].style.outline = "0";
        });
    document
        .querySelector(CLOSE_BOTTOMNAV_TOGGLE_SEL)
        .addEventListener("click", () => {
            schliessenToggle(STARTPAGE);
        });
    document
        .querySelector(CLOSE_BOTTOMNAV_TOGGLE_SEL)
        .addEventListener("mousedown", () => {
            document.querySelectorAll(
                CLOSE_BOTTOMNAV_TOGGLE_SEL
            )[0].style.outline = "0";
        });
    }

    function headerToggle(SCROLLING, STARTPAGE) {
    animateHeaderToggle();
    navToggle(SCROLLING, STARTPAGE);
    elToggle(CLASS_HEADER_OPEN);
    }

    function schliessenToggle(STARTPAGE) {
    navToggle(false, STARTPAGE);
    if (isOpen(CLASS_KONTAKT_OPEN)) {
        document.body.classList.remove(CLASS_KONTAKT_OPEN);
    } else if (isOpen(CLASS_IMPRESSUM_OPEN)) {
        document.body.classList.remove(CLASS_IMPRESSUM_OPEN);
    } else if (isOpen(CLASS_DATENSCHUTZ_OPEN)) {
        document.body.classList.remove(CLASS_DATENSCHUTZ_OPEN);
    }
    }

    function kontaktToggle(STARTPAGE) {
    navToggle(false, STARTPAGE);
    elToggle(CLASS_KONTAKT_OPEN);
    }

    function impressumToggle(STARTPAGE) {
    navToggle(false, STARTPAGE);
    elToggle(CLASS_IMPRESSUM_OPEN);
    }

    function datenschutzToggle(STARTPAGE) {
    navToggle(false, STARTPAGE);
    elToggle(CLASS_DATENSCHUTZ_OPEN);
    }

    // animating functions
    function animateHeaderToggle() {
    if (!isOpen(CLASS_HEADER_OPEN)) {
        gsap.to(TOP_NAV_TOGGLE_SCD_SEL, {
            duration: 0.2,
            scaleX: 0,
            transformOrigin: "right center",
        });
        gsap.to(TOP_NAV_TOGGLE_FST_SEL, {
            duration: 0.4,
            rotate: "-45",
            scaleX: 0.85,
            transformOrigin: "right center",
        });
        gsap.to(TOP_NAV_TOGGLE_THRD_SEL, {
            duration: 0.4,
            rotate: "45",
            scaleX: 0.85,
            transformOrigin: "right center",
        });
    } else {
        gsap.to(TOP_NAV_TOGGLE_SCD_SEL, {
            duration: 0.4,
            scaleX: 1,
            transformOrigin: "right center",
        });
        gsap.to(TOP_NAV_TOGGLE_FST_SEL, {
            duration: 0.4,
            rotate: "0",
            scaleX: 1,
            transformOrigin: "right center",
        });
        gsap.to(TOP_NAV_TOGGLE_THRD_SEL, {
            duration: 0.4,
            rotate: "0",
            scaleX: 1,
            transformOrigin: "right center",
        });
    }
    }

    // helper functions
    function navToggle(SCROLLING, STARTPAGE) {
    elToggle(CLASS_NAV_OPEN);
    }

    function whiteNavToggle() {
    elToggle(CLASS_NAV_WHITE);
    }

    function elToggle(CLASS) {
    if (!isOpen(CLASS)) {
        document.body.classList.add(CLASS);
    } else {
        document.body.classList.add(CLASS);
    }
    }

    function isOpen(CLASS) {
    return document.body.classList.contains(CLASS);
    }

    function footerIsOpen() {
    return (
        isOpen(CLASS_KONTAKT_OPEN) ||
        isOpen(CLASS_IMPRESSUM_OPEN) ||
        isOpen(CLASS_DATENSCHUTZ_OPEN)
    );
    }

    new fullpage("#fullpage", {
    //callbacks
    onLeave: function (origin, destination, direction) {
        // enter first page: make all UI-elements disappear
        if (destination.index == 0 && !footerIsOpen()) {
            // topNavToggle
            document.getElementsByClassName(
                TOP_NAV_TOGGLE_DIV_SEL
            )[0].style.opacity = "0";
            document.getElementsByClassName(
                TOP_NAV_TOGGLE_DIV_SEL
            )[0].style.display = "none";
            // bottomNavToggles
            document.getElementsByClassName(
                BOTTOM_NAV_TOGGLES_SEL
            )[0].style.opacity = "0";
            document.getElementsByClassName(
                BOTTOM_NAV_TOGGLES_SEL
            )[0].style.display = "none";
        }
        // make open header disappear on scroll
        if (isOpen(CLASS_HEADER_OPEN)) {
            headerToggle(true, true);
        }
        // change UI elements color on slide sparring arrive
        if (destination.index == 6 && !footerIsOpen()) {
            whiteNavToggle();
        }
        // change UI elements color on slide sparring leave
        if (origin.index == 6 && !footerIsOpen()) {
            whiteNavToggle();
        }
        // disable fullpage scrolling when either kontakt, impressum or datenschutz is open
        if (footerIsOpen()) {
            return false;
        }
    },
    afterLoad: function (origin, destination, direction) {
        // make topNavToggle and kontakt appear
        if (destination.index != 0) {
            // topNavToggle
            document.querySelectorAll(TOP_NAV_TOGGLE_DIV_SEL)[0].style.display =
                "block";
            gsap.to(TOP_NAV_TOGGLE_DIV_SEL, {
                duration: 0.4,
                opacity: "1",
            });
            // kontakt
            document.querySelectorAll(BOTTOM_NAV_TOGGLES_SEL)[0].style.display =
                "flex";
            gsap.to(BOTTOM_NAV_TOGGLES_SEL, {
                duration: 0.4,
                opacity: "1",
            });
        }
    },
    // license
    licenseKey: MY_FULLPAGE_LICENSE,
    autoScrolling: true,
    scrollBar: false,
    css3: true,
    navigation: true,
    slidesNavigation: true,
    controlArrows: false,
    recordHistory: false,
    verticalCentered: false,
    });

    //methods
    fullpage_api.setAllowScrolling(true);

    // add eventListeners
    addSharedEventListeners(true);

</script>

[kof]

you can do this type of thing these days mostly using just css

[benjaminpreiss]

Used your hint and also added an if-statement to destroy full page if it doesn't exist - sadly doesn't work. The problem with preview destroying fullpage is still a problem. You can see in the console logs that there is a problem with fullpage being instantiated multiple times.

As you can see, I also massively reduced the complexity of the code for now (which is why the scroll up is working again):

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.js" integrity="sha512-212XzBn0s4WIDgCVdotpEppK681Cn9mMTDC70bt0kp3JSU+Mpm2W0/nxu0/pXLICm3guSIRnZFSQ3vSFJ6W+Tg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="module">
    let fp;
    if(fp) fp.destroy()
    fp = new fullpage("#fullpage", {
        //callbacks
        onLeave: function (origin, destination, direction) {
        },
        afterLoad: function (origin, destination, direction) {
        },
        // license
        licenseKey: "******",
        autoScrolling: true,
        scrollBar: false,
        css3: true,
        navigation: true,
        slidesNavigation: true,
        controlArrows: false,
        recordHistory: false,
        verticalCentered: false,
      });
  
      //methods
      fullpage_api.setAllowScrolling(true);
    

</script>

Cap.2024-12-04.at.10.50.49.mp4

[kof]

Maybe a better idea instead of .destroy() is to check if on the element some attribute is set after initialization and once set don't initialize again

[benjaminpreiss]

Doesn't work sadly, already checked:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

<script type="module">
    let fp, fullpage_api;
    if(fp == undefined)
    fp = new fullpage("#fullpage", {
        //callbacks
        onLeave: function (origin, destination, direction) {
        },
        afterLoad: function (origin, destination, direction) {
        },
        // license
        licenseKey: "******",
        autoScrolling: true,
        scrollBar: false,
        css3: true,
        navigation: true,
        slidesNavigation: true,
        controlArrows: false,
        recordHistory: false,
        verticalCentered: false,
      });
  
      //methods
      if(fullpage_api) fullpage_api.setAllowScrolling(true);
    

</script>

Cap.2024-12-04.at.11.20.12.mp4

Now I implemented this code (but still no success) - turns out the version I am using needs to call fullpage_api.destroy():

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

<script type="module">
    let fp, fullpage_api;
    if(fullpage_api && fp) fullpage_api?.destroy('all')
    fp = new fullpage("#fullpage", {
        //callbacks
        onLeave: function (origin, destination, direction) {
        },
        afterLoad: function (origin, destination, direction) {
        },
        // license
        licenseKey: "******",
        autoScrolling: true,
        scrollBar: false,
        css3: true,
        navigation: true,
        slidesNavigation: true,
        controlArrows: false,
        recordHistory: false,
        verticalCentered: false,
      });
  
      //methods
      if(fullpage_api) fullpage_api.setAllowScrolling(true);
    

</script>

I think it's better to use the .destroy() function because it reverses all the effects that fullpage has (DOM modifications, evend handler registrations etc.)

Cap.2024-12-04.at.11.14.55.mp4

[kof]

you might be running into a situation where the fp is not set and yet the thing is running, because type module makes variables local to the script and if modes are switched or on the published site user navigates between pages, client router doesn't do a full page reload so the old script is still working in memory but your reference fp is new.

2 ways of dealing with this:

1. referencing something on window so you can destroy it
2. not destroying at all, but instead refreshing the same instance, making it pickup new dom elements, that's an option if there is a method or something to do it

[benjaminpreiss]

Got it to work 💥:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

<script type="module">
    if(window.fp) {
      window.fp.destroy('all')
    }
    window.fp = new fullpage("#fullpage", {
        //callbacks
        onLeave: function (origin, destination, direction) {
        },
        afterLoad: function (origin, destination, direction) {
        },
        // license
        licenseKey: "******",
        autoScrolling: true,
        scrollBar: false,
        css3: true,
        navigation: true,
        slidesNavigation: true,
        controlArrows: false,
        recordHistory: false,
        verticalCentered: false,
      });
  
      //methods
      if(window.fp) window.fp.setAllowScrolling(true);
</script>

Cap.2024-12-04.at.12.06.07.mp4