[Issue with pinning element animation, being jumpy while translating x value on scroll.]

Actually I've found what the issue seems to be. Previously I implemented a ScrollTrigger.refresh() for lazy loaded images. I believe as the project card images were loading (on horizontal scroll) it was calling this and thus causing a slight jump briefly, I've just disabled this refresh only on these images and it seems to have fixed it.

Please mark this as resolved.

[Issue with pinning element animation, being jumpy while translating x value on scroll.]

Any help would be appreciated greatly here, I've read the docs thoroughly and haven't had much luck with this.

Basically of scroll of my pinned section (third section), it's as if it recalculates scroll values and makes the horizontal effect a little jumpy initially, after which is resolves and can't be replicated until a page refresh. I've just tried the fastScrollEnd and preventOverlaps but seemed to make worse.

This is the code in question, I thought it may of been because I was animating the right value beforehand but I sinced changed it to 'x'. I also have no other pinned sections on the page. 
 

let scrollWidth = window.innerWidth > 768 ? self.elements.projectsHomeCards.scrollWidth/1.3 + 40 : self.elements.projectsHomeCards.scrollWidth/1.2 + 60
      
gsap.set(self.elements.projectsHomeCards, { x: window.innerWidth + 40 });
gsap.to(self.elements.projectsHomeCards, {
  x: -self.elements.projectsHomeCards.scrollWidth + window.innerWidth / 2,
  ease: "none",
  scrollTrigger: {
    trigger: self.elements.projectsHome.parentNode,
    fastScrollEnd: true,
    preventOverlaps: true,
    pin: true,
    scrub: 1,
    end: () => "+=" + (scrollWidth)
  }
})

Any advice here or areas to explore? thanks in advance.

Live site URL:

https://weareabstrakt.com/