FS Cookie Banner with GSAP

Community
1

Hey guys, have any of you lunatics already rebuilt the animations for Finsweet’s cookie banners with GSAP? That would be an important step towards a life without webflow heavy animations.

2

I think if you use the Javascript based version it doesn’t use Webflow IX.

3

Is there a javascript based version?

4

Well, I have made the the interactions of the cookie banner with GSAP. This includes the cookie banner. Please note that I always put the cookie manager in the footer. Therefore, there is no interaction for it.

<!-- Cookie Banner -->
<script>
//Cookie Banner
function toggleBannerComponent() {
    const bannerTrigger = document.querySelector(".fs-cc-banner_trigger");
    const bannerComponent = document.querySelector(".fs-cc-banner_component");
    const bannerOverlay = document.querySelector(".fs-cc-banner_overlay");
    const bannerWrapper = document.querySelector(".fs-cc-banner_wrapper");
    let bannerTimeline = gsap.timeline ();

  // Überprüfe, ob die Preferences-Komponente aktuell sichtbar ist
  const isOpen = bannerComponent.style.display === "flex";

  if (!isOpen) {
    // Wenn die Komponente geschlossen ist, spiele die Öffnungsanimation ab
    bannerTimeline.set(bannerComponent, {display:"flex"});
    bannerTimeline.fromTo( bannerOverlay, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.4 },">");
    bannerTimeline.fromTo( bannerWrapper, { autoAlpha: 0, y: "100%" }, { autoAlpha: 1, y: "0%", duration: 0.4 },"<");

      
  } else {
    // Wenn die Komponente geöffnet ist, spiele die Schließungsanimation ab
        bannerTimeline.to(bannerWrapper, { autoAlpha: 0, y: "100%", duration: 0.4 });
        bannerTimeline.to(bannerOverlay, { autoAlpha: 0, duration: 0.4 },"<0.2");
        bannerTimeline.set(bannerComponent, {display:"none"},">");}
}

// Füge einen Event-Listener zum Klicken des Triggers hinzu
const bannerTrigger = document.querySelector(".fs-cc-banner_trigger");
bannerTrigger.addEventListener("click", toggleBannerComponent);

//Cookie Einstellungen öffnen
function togglePrefsComponent() {
    const prefsTrigger = document.querySelector(".fs-cc-prefs_trigger");
    const prefsComponent = document.querySelector(".fs-cc-prefs_component");
    const prefsOverlay = document.querySelector(".fs-cc-prefs_overlay");
    const prefsForm = document.querySelector(".fs-cc-prefs_form");
    let prefTimeline = gsap.timeline ();

  // Überprüfe, ob die Preferences-Komponente aktuell sichtbar ist
  const isOpen = prefsComponent.style.display === "flex";

  if (!isOpen) {
    // Wenn die Komponente geschlossen ist, spiele die Öffnungsanimation ab
    prefTimeline.set(prefsComponent, {display:"flex"});
    prefTimeline.fromTo( prefsOverlay, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.4 },">");
    prefTimeline.fromTo( prefsForm, { autoAlpha: 0, y: "20px" }, { autoAlpha: 1, y: "0px", duration: 0.4 },"<");

      
  } else {
    // Wenn die Komponente geöffnet ist, spiele die Schließungsanimation ab
        prefTimeline.to(prefsForm, { autoAlpha: 0, y: "20px", duration: 0.4 });
        prefTimeline.to(prefsOverlay, { autoAlpha: 0, duration: 0.4 },"<0.2");
        prefTimeline.set(prefsComponent, {display:"none"},">");}
}

// Füge einen Event-Listener zum Klicken des Triggers hinzu
const prefsTrigger = document.querySelector(".fs-cc-prefs_trigger");
prefsTrigger.addEventListener("click", togglePrefsComponent);
</script>

<!-- Navburger -->
<script>
let mm = gsap.matchMedia();

const navbarTrigger = document.querySelector('.w-nav-button');
const lineTop = document.querySelector('.menu-icon1_line-top');
const lineMiddle = document.querySelector('.menu-icon1_line-middle');
const lineBottom = document.querySelector('.menu-icon1_line-bottom');

mm.add('(max-width: 991px)', () => {
    
let navbarTriggerAnimation = gsap.timeline({ paused: true, reversed: true });
navbarTriggerAnimation.to(lineMiddle, { scaleX: 0, opacity: 0, duration: 0.3 });
navbarTriggerAnimation.to(lineTop, { y: 8, duration: 0.3 },"<");
navbarTriggerAnimation.to(lineBottom, { y: -8, duration: 0.3 },"<");
navbarTriggerAnimation.to(lineTop, { rotate: 45, duration: 0.3 },">");
navbarTriggerAnimation.to(lineBottom, { rotate: -45, duration: 0.3 },"<");


  function toggleNavbarTriggerAnimation() {
    // Wenn Animation noch nicht gestartet
    if (navbarTriggerAnimation.reversed()) {
        // Starte die Animation
        navbarTriggerAnimation.play();
    } else {
        // Andernfalls, spiele die Animation Rückwärts ab
        navbarTriggerAnimation.reverse();
    }
  }

  navbarTrigger.addEventListener('click', toggleNavbarTriggerAnimation);

  // Wenn max-width ist nicht <=991px, wollen wir alles zurücksetzen was nicht GSAP ist
  return () => {
    navbarTrigger.removeEventListener('click', toggleNavbarTriggerAnimation);
  }
})
</script>
type or paste code here