Jump to content
Search Community

frontcodelover

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by frontcodelover

    Bug on scrollTrigger animation Safari (work nice on chrome and FF)

    in GSAP

    Posted

    Hello @Rodrigo thanks for your reply

     

    I updated the package, add "once:true" on my code and log the scale  

    >>> 1

     

    Errors are still here on Safari only and I don't know why.

    Do you have any ideas ?

      

     const el = imgRef.current;
    gsap.fromTo(
      el,
      { autoAlpha: 0, yPercent: -25, stagger: 0.1 },
      {
        autoAlpha: 1,
        duration: 2,
        ease: "power4.inOut",
        translateY: "0",
        yPercent: 0,
        scrollTrigger: {
          trigger: el,
          once: true,
        },
      }
    );

    const elComputer = imgComputRef.current;
    gsap.fromTo(
      elComputer,
      { scale: 0.8, autoAlpha: 0 },
      {
        scale: 1,
        ease: "power4.inOut",
        autoAlpha: 1,
        duration: 2,
        onComplete() {
          console.log(gsap.getProperty(elComputer, "scale"));
        },
        scrollTrigger: {
          trigger: elComputer,
          once: true,
        },
      }
    );

    const elButton = imgButtonRef.current;
    gsap.fromTo(
      elButton,
      { autoAlpha: 0, translateY: "10px" },
      {
        ease: "power4.inOut",
        autoAlpha: 1,
        duration: 2,
        translateY: "0",
        scrollTrigger: {
          trigger: elButton,
          once: true,
        },
      }
    );

    const elText = txtTest.current;
    gsap.fromTo(
      elText,
      { x: -2000, autoAlpha: 1, ease: "slowMo" },
      {
        scrollTrigger: {
          trigger: elText,
          scrub: 0.6,
          start: "center center",
          end: "top 50%",
        },
        x: "0",
      }
    );

    const elText2 = txtTestTwo.current;
    gsap.fromTo(
      elText2,
      { x: -2000, autoAlpha: 1, ease: "slowMo" },
      {
        scrollTrigger: {
          trigger: elText2,
          scrub: 0.6,
          start: "top 31%",
          end: "bottom 50%",
        },
        x: "0",
      }
    );

    const elTextprojects = textProjects.current;
    gsap.fromTo(
      elTextprojects,
      { x: -2000, autoAlpha: 1, ease: "slowMo" },
      {
        scrollTrigger: {
          trigger: elTextprojects,
          scrub: 0.6,
          start: "center center",
          end: "top 50%",
        },
        x: "0",
      }
    );

     

×
×
  • Create New...