Jump to content
Search Community

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

frontcodelover test
Moderator Tag

Recommended Posts

Hey, I made my portfolio with React and GSAP. All works well on Firefox and Chrome but for no reason I have some bugs on Safari... I made a video of this bug.

 

My code is here https://github.com/frontcodelover/portfolio/blob/main/src/Pages/Home.tsx

 

Video here

https://www.veed.io/view/be2c50e0-b9d0-4015-9f0c-cb7022c03713/showcase?sharingWidget=true

 

Any idea why ?

Link to comment
Share on other sites

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

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

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. 

Link to comment
Share on other sites

Hey Nicolas,

 

The site looks really amazing, great job!

 

Unfortunately I don't have an iOS device so I can't test it. Still I leave the direct link for people that could take a peek at it:
https://k1x9o1-3000.preview.csb.app/

 

It would be great if you could isolate just the home page in a codepen sample. Sorry to pester you about it, but it will be orders of magnitude easier for other people to edit the code in codepen and test those changes directly on their devices.

 

Also, based on the video this seems to happen only to the scale property of the image that is animated by this, right?:

gsap.fromTo(
  elComputer,
  { scale: 0.8, autoAlpha: 0 },
  {
    scale: 1,
    ease: "power4.inOut",
    autoAlpha: 1,
    duration: 2,
    scrollTrigger: {
      trigger: elComputer,
    },
  }
);

A couple of things that you could test for now is to add an onComplete callback to that GSAP instance and check the scale value of the element. Perhaps add for now a fixed div on top of everything where you can update it's text. Something like this:

gsap.fromTo(
  elComputer,
  { scale: 0.8, autoAlpha: 0 },
  {
    scale: 1,
    ease: "power4.inOut",
    autoAlpha: 1,
    duration: 2,
    onComplete() {
      myDebugEl.innerHTML(gsap.getProperty(elComputer, "scale"); );
    },
    scrollTrigger: {
      trigger: elComputer,
    },
  }
);

Unless you can debug those values in your local environment and report them to us.

 

One option I can think of is to use once: true in your ScrollTrigger configuration:

gsap.fromTo(
  elComputer,
  { scale: 0.8, autoAlpha: 0 },
  {
    scale: 1,
    ease: "power4.inOut",
    autoAlpha: 1,
    duration: 2,
    scrollTrigger: {
      trigger: elComputer,
      once: true,
    },
  }
);

Another option is to use normalizeScroll:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Finally you're using a not too old, but previous nonetheless, version of GSAP. Try updating it to 3.11.2 and see if that helps. I'll let you know when version 3.11.2 is ready as well so you can upgrade to that, since it solves a few things.

 

Let us know how it works.

 

Happy Tweening!!!

Link to comment
Share on other sites

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",
      }
    );

 

Link to comment
Share on other sites

If you can pop together a really minimal demo over on codepen (only the bugs you're struggling with rather than your whole portfolio), I'll take a look for you.

 

As it's safari it's more likely to be a browser rendering issue than an issue with how you've written your GSAP code. This is why it's so helpful to reduce it down to the smallest possible example so that we can troubleshoot for you!

Also a description of what the expected behaviour is, and what the actual behaviour is will also be very helpful.

 

Thanks so much!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...