Safari isuess scroll and scrolltrigger

[Matevz]

Hi, im having big issues on safari browsers with scroll and scroll trigger: https://clou.agency/

works perfectly in Chrome.

the page is laging and resizing when u scroll on mobile..

 

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

 

// normalize scroll behavior

ScrollTrigger.normalizeScroll(true);

 

// create a ScrollSmoother instance

let smoother = ScrollSmoother.create({

    smooth: 3,

    effects: true,

    smoothTouch: 0.2

 

});

 

Where can i start to resolve this u isuess?

[GSAP Helper]

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 Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. 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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[Matevz]

See the Pen dywrELv by peva92 (@peva92) on CodePen

[Rodrigo]

Hi,

 

I just visited the link of both the codepen and the url and they don't behave in the same way on iOS safari 16 on an iPad.

 

The site works pretty much in the same way on both Safari and Chrome but the codepen is very clunky on Safari but works OK on chrome. Also the codepen has a few warnings from GSAP regarding missing elements that you're trying to animate.

 

Also on a quick glance, I can see that you have a lot of CSS transitions there and IDK if those apply to the same elements GSAP is targeting. That could lead to unexpected results. That being said there is a lot in your CSS and maybe some of the issues you're seeing could stem from there, I couldn't really tell you because we don't have the time resources to comb through over 1600 lines of CSS trying to find issues, that's beyond the scope of what we can do in these free forums.

 

Finally I see that you are using old syntax to create your timeline instance, no need for that, just use the latest syntax:

const tl = gsap.timeline();

You are also creating two ScrollTrigger instances with the same configuration:

gsap.to(".logo-rotating", {
  rotation: 0, // add this property to rotate the element by 360 degrees
  xPercent: -130,
  ease: "none",
  scrollTrigger: {
    trigger: ".animacija",
    start: "top center",
    end: "bottom top",
    scrub: true
  }
});

gsap.to(".mi-smo", {
  xPercent: -50,
  ease: "none",
  scrollTrigger: {
    trigger: ".animacija",
    start: "top center",
    end: "bottom top",
    scrub: true
  }
});

Why not just create a timeline with a ScrollTrigger in it. Using the position parameter you can make both animations start at the same time:

gsap.timeline({
  scrollTrigger: {
    trigger: ".animacija",
    start: "top center",
    end: "bottom top",
    scrub: true
  }
})
  .to(".logo-rotating", {
  rotation: 0, // add this property to rotate the element by 360 degrees
  xPercent: -130,
  ease: "none",
}, 0)
  .to(".mi-smo", {
  xPercent: -50,
  ease: "none",
}, 0);

Hopefully this helps.

Happy Tweening!