Jump to content
Search Community

sammekekko

Business
  • Posts

    7
  • Joined

  • Last visited

Posts posted by sammekekko

  1. Hello, I have encountered a frustrating problem where my navigation page opened by the menu button, is not smoothly animated on safari. I added a will-change: transform for the divs that were animated with transform. This did not help my issue.

    Example of this can be seen live on the website on mobile sizes: press on the menu text in the navbar (I am far from done with the website overall).

     

    .navigation-page-navbar, .bottom-container and .navigation-page all have will-change: transform;

    Here is the animation in JS:

     

    let menuTimeline = $gsap.timeline({ paused: true });
      menuTimeline
        .set("html, body", {
          overflowY: "hidden",
        })
        .set(".navigation-page-navbar", {
          xPercent: 50,
        })
        .set(".bottom-container", {
          xPercent: 50,
        })
        .to(".navigation-page", {
          xPercent: -100,
          duration: 0.8,
          ease: "power4.inOut",
        })
        .to(".navigation-page-navbar", {
          xPercent: 0,
          duration: 0.5,
          delay: -0.55,
          ease: "power4.inOut",
        })
        .to(".bottom-container", {
          xPercent: 0,
          duration: 0.65,
          delay: -0.6,
          ease: "power4.inOut",
        })
        .to("html", 0.4, {
          "--nav-hamburger-width": "100%",
          ease: "Power2.easeInOut",
          delay: -0.7,
        });


    stackblitz demo:

    https://stackblitz.com/edit/nuxt-starter-dyou9c?file=components%2FHeader.vue

    Thanks ahead for trying to help me!



  2. (Scroll down for the text)

    This will recreate my issue, where if I on a smaller resolution run the script, the header will get split into two lines (therefore two divs). When I then rescale to a full screen size, the two divs are still there. I could not manage to get an update function in the codepen, because I am using nuxt and the rep i was looking for did not have splittext and scrolltrigger..

    I think what I am missing is a proper debounce!
     

  3. Hello! I have recently encountered a problem where I am trying to revert the parent divs after a browser resize, but it is not reverting at all!

    I am trying to revert the "paragraph-" and "headerParentSplit" before the animation starts (as long as it has been set before) I have tried debugging by console logging this if statement, and it does go through, although it still does no difference.

     

    First picture with only one header line, is how it should look like. This is what happens when you enter the website with a fullscreen resolution. The other picture with a red and black background for the header, is how it looks like. The reason behind this is that the div is split into lines when the resolution was smaller (therfore it is two divs). It does not revert with the following code..

    
    
    function setupSplits() {
      const paragraph = document.querySelectorAll("p");
      const header = document.querySelectorAll("h1, h2");
    
      if (headerParentSplit != null) {
        headerParentSplit.revert();
        paragraphParentSplit.revert();
      }
    
      var headerParentSplit = new $SplitText(header, {
        // type: "words",
        linesClass: "split-parent",
      });
    
      var paragraphParentSplit = new $SplitText(paragraph, {
        // type: "words",
        linesClass: "split-parent",
      });
    
      header.forEach((header) => {
        // Reset if needed
        if (header.anim) {
          header.anim.progress(1).kill();
          header.split.revert();
        }
    
        header.split = new $SplitText(header, {
          type: "lines,words",
          linesClass: "split-line",
        });
    
        // Set up the anim
        $gsap.set("h1, h2", {
          visibility: "visible",
        });
    
        header.anim = $gsap.from(header.split.words, {
          scrollTrigger: {
            trigger: header,
            toggleActions: "restart pause resume reverse",
            start: "top 95%",
          },
          duration: 0.7,
          ease: "circ.easeOut",
          yPercent: 100,
          opacity: 0,
          stagger: 0.015,
        });
      });
    
      paragraph.forEach((paragraph) => {
        // Reset if needed
        if (paragraph.anim) {
          paragraph.anim.progress(1).kill();
          paragraph.split.revert();
        }
    
        paragraph.split = new $SplitText(paragraph, {
          type: "lines,words,chars",
          linesClass: "split-line",
        });
    
        $gsap.set("p", {
          visibility: "visible",
        });
    
        paragraph.anim = $gsap.from(paragraph.split.words, {
          scrollTrigger: {
            trigger: paragraph,
            toggleActions: "restart pause resume reverse",
            start: "top 95%",
          },
          duration: 0.6,
          ease: "circ.easeOut",
          yPercent: 100,
          opacity: 0,
          stagger: 0.005,
        });
      });
    }
    
    onMounted(() => {
      setupSplits();
      $ScrollTrigger.addEventListener("refresh", () => {
        setupSplits();
      });
    });

     

    image.thumb.png.ffb3d632e92b8f5f55ac12c051ee4301.png

    image.png

    See the Pen BaMmoeG by sammekekko (@sammekekko) on CodePen

  4. 2 hours ago, Rodrigo said:

    Hi @sammekekko and welcome to the GSAP forums!

     

    Thanks for being a business user and supporting GSAP! 💚

     

    Yeah, this seems more a requirement of the i18n API more than anything, basically something (callback or some reactive property) that tells you when the language switch is completed in order to create the animations again.

     

    I don't have time now to create a full example of this, but my guess is that these type of packages don't create a full re-render of the components, meaning that they don't remove the current DOM elements and replace them with new ones. As far as I can remember i18n packages just replace the content of those DOM elements (based on JSON files that contain the texts for each language).

     

    Are you 100% sure that the watcher you have in place is working? I mean have you added some console logs in it in order to check if the watcher is actually running?

     

    Maybe you can setup a watcher for the locale route instead:

    https://i18n.nuxtjs.org/api/composables#uselocaleroute

     

    Also digging a bit more into this I found this:

    https://i18n.nuxtjs.org/guide/runtime-hooks

     

    Here is an example of how is used:

    https://stackblitz.com/edit/nuxt-starter-avudph?file=pages%2Findex.vue,plugins%2Fi18n.ts

     

    You could use that with a global composer or directly from the nuxtApp instance in your component.

     

    Hopefully this helps.

    Happy Tweening!

    Thanks so much for the info! I have tried the following stuff, but I realized that I probably will have to do some whole page loading animation as a loader instead. It will look great and fix my issue!

  5. <script setup>
    
    const { $gsap, $ScrollTrigger, $SplitText, $ScrollSmoother } = useNuxtApp();
    
    function setupSmoothScroll() {
    $ScrollSmoother.create({
    smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
    effects: true, // looks for data-speed and data-lag attributes on elements
    smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
    });
    }
    function setupSplits() {
    const paragraph = document.querySelectorAll("p");
    const header = document.querySelectorAll("h1, h2");
    const parentSplit = new $SplitText(header, {
    // type: "words",
    linesClass: "split-parent",
    });
    
    header.forEach((header) => {
    // Reset if needed
    if (header.anim) {
    header.anim.progress(1).kill();
    header.split.revert();
    }
    
    header.split = new $SplitText(header, {
    type: "lines,words",
    linesClass: "split-line",
    });
    
    // Set up the anim
    header.anim = $gsap.from(header.split.words, {
    scrollTrigger: {
    trigger: header,
    toggleActions: "restart pause resume reverse",
    start: "top 120%",
    },
    duration: 0.7,
    ease: "circ.easeOut",
    yPercent: 100,
    opacity: 0,
    stagger: 0.015,
    });
    });
    
    paragraph.forEach((paragraph) => {
    // Reset if needed
    if (paragraph.anim) {
    paragraph.anim.progress(1).kill();
    paragraph.split.revert();
    }
    
    paragraph.split = new $SplitText(paragraph, {
    type: "lines,words,chars",
    linesClass: "split-line",
    });
    
    // Set up the anim
    paragraph.anim = $gsap.from(paragraph.split.words, {
    scrollTrigger: {
    trigger: paragraph,
    toggleActions: "restart pause resume reverse",
    start: "top 120%",
    },
    duration: 0.5,
    ease: "circ.easeOut",
    yPercent: 100,
    opacity: 0,
    stagger: 0.015,
    });
    });
    }
    
    onMounted(() => {
    setupSmoothScroll();
    $ScrollTrigger.addEventListener("refresh", setupSplits);
    setupSplits(); 
    });
    
    const route = useRoute();
    
    watch(
    () => route.path,
    () => {
    $ScrollTrigger.refresh();
    }
    );
    </script>
    
    

    I am trying to restart ScrollTrigger when there is a locale change, because otherwise there is no animation for my text when the language is changed.

    My code where I have done the animations with scrolltrigger (default layout) ^^.

    I have tried:
    * Making a watch function for language change and restarting ScrollTrigger(does not work because the text is too quick to change to the other language resulting in the text being static. It does work when I make a timeout, but this results in the text being static for a quick period of time and then the animation begins.

    * Restarting ScrollTrigger when you press the locale change button (same issue as above)

    * Scoured the internet and found nothing that would help exactly my situation...

    Here I have a video where I first show what it should look like, and then what it looks like.
     

×
×
  • Create New...