Jump to content
Search Community

raana

Members

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Posts posted by raana

    How can ScrollTrigger run the animation from the moment the page loads?

    in GSAP

    Posted

    On 9/2/2022 at 6:52 PM, GSAP Helper said:

    It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

     

    Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

     

    Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

     

     

    If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

     

    Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

    Hi, I put my code in codesandbox but although it works in my local system, it doesn't work here at all, I hope you can help me.

    https://codesandbox.io/s/busy-dewdney-u7h30r?file=/src/App.js:3706-3718

    How can ScrollTrigger run the animation from the moment the page loads?

    in GSAP

    Posted

    I have an array that changes as the page scrolls in order of svg shapes, I need the first shape to be displayed on page load. Therefore, I entered the first path d manually and statically.
    When I scroll to the end of the page and then go back to the beginning, it does not display the first page. Therefore, I returned the first shape to the array, but now the first shape is displayed twice in a row, and I want each one to be displayed only once.
      I read the DOC, but I didn't get anything, maybe I didn't read it correctly :(

      

               for(let i = 0 ; i < heroSlides.length ; i++){
          tl.to("#Tear",{
                delay: 0.3,
                duration: 0.5,
                attr:{d:heroSlides[i].path,}})
            .to("#rect",{attr:{style:`fill:${heroSlides[i].fill}`},
                  delay:0.75,
                  
              },"-=0.3")
            .call(changeBoxes, [i],"-=0.4");
        }   
const scroll = ScrollTrigger.create({
            trigger: ".module",
            pin: true,
            scrub: true,
            start: 'top top',
            end: "max", 
            animation: tl,
            // markers: true,
            pinReparent: true, 
            fastScrollEnd: false, 
        });
        scroll.scroll();

     

    How to change color and SVG mask at the same time?

    in GSAP

    Posted

    1 hour ago, mvaneijgen said:

    Have you looked at the position parameter? With it you can set tweens to start with the previous tween, at a specific time or 0.3 seconds after the  previous tween has started '-=0.3' and more! (See the doc)

     

    A minimal demo would really help to show you how it would work, so if it is not clear please include one.

    Thank you very much, it worked. 

    Sometimes the colors were not displayed correctly.

    I changed the set()s to to() and set Absolute time. 

    How to change color and SVG mask at the same time?

    in GSAP

    Posted

    I wrote the following code to change the shape of svg, but this code has a problem. I want the color of #rect to change at the same time every time atr changes.
    Is it possible to do the same code with another solution?

      

        var tl = gsap.timeline({});
    //2
    tl.to("#Tear", {
      attr: {
        d: First
      }
    });
    //3
    tl.set("#rect", {
      attr: {
        style: "fill:#FB7185"
      }
    }).to("#Tear", {
      attr: {
        d: Second
      }
    });
    //4
    tl.set("#rect", {
      attr: {
        style: "fill: #38BDF8"
      }
    }).to("#Tear", {
      attr: {
        d: Third
      }
    });
    //5
    tl.set("#rect", {
      attr: {
        style: "fill: #A78BFA"
      }
    }).to("#Tear", {
      attr: {
        d: Fourth
      }
    });

 const scroll = ScrollTrigger.create({
      trigger: ".J02ig",
      pin: true,
      scrub: 0.5,
      start: "top top",
      end: "max",
      animation: tl
      // onToggle: self => console.log("toggled, isActive:", self.isActive),
      // onUpdate: self => console.log("direction:", self.direction)
    });
    scroll.scroll();

     

    ReferenceError: ScrollTrigger is not defined

    in GSAP

    Posted

    I had previously installed with  npm install gsap but today I downloaded GSAP 3 with Shockingly Green bonus files (3.8.0) from my dashboard and installed it with npm install ./gsap-bonus.tgz   than I try  to run npm install gsap@npm:@gsap/shockingly .

     

    Do I have to install libraries separately?

     

    COPY TO CLIPBOARD

    1 hour ago, Cassie said:

    Hey @raana,

     

    Have you included scrollTrigger?

    Here's an installation guide - happy to provide pointers if you can give me more information about your project setup.

    https://greensock.com/docs/v3/Installation

×
×
  • Create New...