Performance and small glitches - mostly on Safari and 4k images

[Wild West Design]

Hello all!

 

I'm focusing on overall performance and making websites as smooth as possible on all major browsers. I have some issues that been working on for couple of days and could not get it as i want or even understand why things are happening...

 

1. On my other machine (mac mini 2018) i have a screen that supports 4k images, however on Safari and Chrome the main banner with text sliding from both sides is not smooth and is a bit glitchy https://chemstone.designwildwest.com/ 
FYI: On my Window computer i have a screen that supports 2k images and everything is smooth and works okay.

This below is an animation for image it self and scrollsmoother:

// hero image reveal
function revealHeroItem(elem, direction) {
  gsap.to(elem, {
    duration: 1.5,
    clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
  });
  gsap.from(elem.querySelectorAll(".img-cover"), {
    duration: 2.5,
    autoAlpha: 0,
    opacity: 0,
    scale: 1.1,
  });
}
const imgTl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20},
          start: "top bottom-=15%",
          onLeaveBack: (self) => self.disable(),
          onEnter: function () {
            revealHeroItem(section);
          },
        },
      });

// scroll smoother init
window.addEventListener("load", (event) => {
  ("use strict");

  let smoother = ScrollSmoother.create({
    smooth: 2.5,
    smoothTouch: false,
    ignoreMobileResize: true,
    wrapper: "#smooth-wrapper",
    content: "#smooth-content"
  });
});

Does anybody know/have an idea how to debug it and see if it is a gsap fault or the computer is to slow or something like that?

The scrollSmoother init should be done once all assets are loaded? 

 

 

Sorry for being a bit chaotic in this post but its kind a hard to explain.. once somebody answer i can provide more detalited code/information.

 

thanks Guyz
 

[ryan_labar]

One thing to note is that animating clipPath isn't hardware accelerated, so on old machines you'll likely see a drop in performance. To test, maybe try replicating the animation in CSS and seeing if that changes performance.

Also, I'd recommend setting up the revealHeroItem function as a timeline and control the timeline with ScrollTrigger, rather than having to do all the calculations for the animations onEnter. I'm not sure if that'd make a real difference, but it's worth a shot.

[Wild West Design]

Hi Ryan,

 

Thank you so much for your response.

I will try changing clipPath to something else and see if that helps and will come back with the results.

 

Also by setting up revealHeroItem function as a timeline do you mean something like below?

 

// hero image reveal
function revealHeroItem(elem) {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: elem,
      start: "top bottom-=15%",
      onLeaveBack: (self) => self.disable(),
      // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}
    }
  });

  tl.to(elem, {
    duration: 1.5,
    clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
  }).from(elem.querySelectorAll(".img-cover"), {
    duration: 2.5,
    autoAlpha: 0,
    opacity: 0,
    scale: 1.1
  });
}

// Apply the revealHeroItem function to the section
const section = document.querySelector('section'); // Adjust the selector as needed
revealHeroItem(section);

 

thanks
Maciej

[Cassie]

That looks good to me, one small question, what are you aiming for with this line?
 

onLeaveBack: (self) => self.disable(),

 

[Wild West Design]

Oh sorry this is from the old code, its not needed will delete that, thank you for flaging!