Jump to content
Search Community

initium

Business

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Posts posted by initium

    ScrollSmoother not working correctly

    in GSAP

    Posted

    Hey,

    i am using Nuxt3 with ScrollSmoother Plugin. So in order to wait until the page is loaded i wait for the mounted event until i show my page like so 

      

    <template>
  <div id="smooth-wrapper" v-if="loaded">
    <div id="smooth-content">
      <Hero />
      <Leistungen />
      <PortfolioPreview />
      <Deutschland style="margin-top: 250px" />
      <HorizontalScroll style="margin-top: 250px" />
      <Testimotionals />
      <References style="margin-top: 150px" />
      <Faq style="margin-top: 250px" />
      <Footer />
    </div>
  </div>
</template>

<script setup>
import { ScrollSmoother } from "gsap/ScrollSmoother";

import { onMounted, ref } from "vue";

import Hero from "@/components/hero.vue";
import Leistungen from "@/components/leistungen.vue";
import Deutschland from "@/components/deutschland.vue";
import HorizontalScroll from "@/components/horizontalScroll/horizontalScroll.vue";
import Testimotionals from "@/components/testimotionals.vue";
import References from "@/components/references.vue";
import Faq from "@/components/faq.vue";
import PortfolioPreview from "@/components/portfolioPreview.vue";
import Footer from "@/components/footer.vue";

let smoother;

const loaded = ref(false);

onMounted(() => {
  console.log("ready");
  loaded.value = true;
  let smoother = 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
    wrapper: "#smooth-wrapper",
    content: "#smooth-content",
    scrub: true,
  });
});
</script>


    my problem is, that the scrollsmoother effect doesnt work when i use the v-if statement there.

    Can someone help me?

     

    gsap draw path with horizoontal scroll

    in GSAP

    Posted

    Hey,

    i am using horizontal Scroll like so:
      

    <template>
  <div class="outer">
    <div class="container">
      <svg class="how-does-it-work-path-stroke" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M 10 25 C 30 5 32 39 58 39 Q 81 39 90 23 T 50 5 Q 1 3 31 38 Q 53 61 114 27 T 179 18 T 133 41 T 197 31 L 479 25 L 596 25"
          fill="none"
          stroke="rgba(var(--v-theme-primary))"
          stroke-width=".05"
          stroke-dasharray="1"
        />
      </svg>
      <div class="panel red"><HowDoesItWork /></div>
      <div class="panel orange"><StepOne /></div>
      <div class="panel purple">THREE</div>
      <div class="panel green">FOUR</div>
    </div>
  </div>
</template>

<script> 
  gsap.registerPlugin(ScrollTrigger);

  let sections = gsap.utils.toArray(".panel");
  let container = document.querySelector(".container");

  // Set the width of the container
  container.style.width = `${sections.length * 100}vw`;
    gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".container",
      pin: true,
      scrub: 1,
      snap: 1 / (sections.length - 1),
      end: () => `+=${container.offsetWidth - window.innerWidth}`,
      markers: true,
    },
  });

        
</script>



    i am trying to have a svg path from the first panel red until the last panel green. 

    the svg should also move to the left like the panels do. 

    Can anyone help me?

    ScrollTrigger missing plugin on Nux generate static site

    in GSAP

    Posted

    https://codesandbox.io/s/optimistic-tess-9p5jzo

     

    I am using multiple timelines in order to simulate multiple components.

    I also did the console.log(ScrollTrigger) and it is not null. 

     

    Console Logs:

    1. 9fa9222.js:2 Invalid property scrollTrigger set to {trigger: '.kunden-wrapper', start: 'top 80%', once: true} Missing plugin? gsap.registerPlugin()

    2.GSAP target  not found. https://greensock.com 

    3. ƒ e(n,o){r||e.register(t)||console.warn("Please gsap.registerPlugin(ScrollTrigger)"),this.init(n,o)}

    4. 9fa9222.js:2 Invalid property scrollTrigger set to {trigger: '.leistungen-wrapper', start: 'top 95%', markers: true} Missing plugin? gsap.registerPlugin()

    ScrollTrigger missing plugin on Nux generate static site

    in GSAP

    Posted

    index.vue:

    let t1 = gsap.timeline({
            scrollTrigger: {
              trigger: ".leistungen-wrapper",
              start: "top 95%",
              markers: true,
            },
          });
     
          t1.from(".leistungen-software-wrapper", {
            opacity: 0,
            x: -200,
            duration: 0.7,
            ease: "back.inOut",
          }).from(
            ".leistungen-website-wrapper",
            {
              opacity: 0,
              x: 200,
              duration: 0.7,
              ease: "back.inOut",
            },
            "-=.7"
          );

     

     

    and im creating another timeline in different file which is used in index.vue:

     let t1 = gsap.timeline({
            scrollTrigger: {
              trigger: ".kunden-wrapper",
              start: "top 80%",
              once: true,
            },
          });
     
          t1.from(".kunden-h1", {
            y: 100,
            opacity: 0,
            duration: 0.3,
          })
            .from(".kunden-p", {
              y: 100,
              opacity: 0,
              duration: 0.3,
            })
            .from(".partner-image", {
              y: 100,
              opacity: 0,
              stagger: {
                each: 0.1,
                from: "center",
                ease: "ease-in-out",
              },
            });

     

     

    importing like this:

    import gsap from "gsap";
    import ScrollTrigger from "gsap/ScrollTrigger";
    gsap.registerPlugin(ScrollTrigger);

     

     

     

     

     

     

     

     

     

     

    ScrollTrigger missing plugin on Nux generate static site

    in GSAP

    Posted

    Hello,

    i am using Nuxt, gsap and ScrollTrigger for my website. In Development mode its everything fine but as soon as i generate the website to a static page, Scrolltrigger is not working anymore. The animations are executed as soon as the site gets loaded.

     

    nuxt.config.js 

      build: {
    transpile: [
      "gsap"
    ]
  },

     

     

    index.js 

    import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
    
  created() {
    gsap.registerPlugin(ScrollTrigger);
  },
     let t1 = gsap.timeline({
        scrollTrigger: {
          trigger: ".leistungen-wrapper",
          start: "top 95%",
        },
      });

     

×
×
  • Create New...