Performance issue animating pinned Lottie between snaps in Squarespace

[MichielKnoppert]

On a Squarepage site I'm building there are multiple Lotties that animate on scroll, snapping between a few point in the animation. I've had these up for the last month or so and they super smooth, but since yesterday they are very choppy (see video) as they move from one snap point to the next. I've posted a question with Squarespace to see if anything changed on their end that can account for this.. Do you have any thoughts on what might cause this behavior?

 

<script>
  LottieScrollTrigger({
 target: "#block-yui_3_17_2_1_1730794167201_2234",
 path: "https://raw.githubusercontent.com/michielknop/Lotties/refs/heads/main/Evolution.json",
 speed: "slow",
 scrub: 1 // seconds it takes for the playhead to "catch up"
 // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger
 // you can pass in a "timeline" that has existing animations in it, and LottieScrollTrigger will play that alongside the Lottie animation
 // you can pass a startFrameOffset and/or endFrameOffset to cause the playhead to start/end at a different frame. 
});

function LottieScrollTrigger(vars) {
  let playhead = { frame: vars.startFrameOffset || 0 },
    target = gsap.utils.toArray(vars.target)[0],
    speeds = { slow: "+=2000", medium: "+=1000", fast: "+=500" },
    st = {
      trigger: target,
      pin: true,
      start: "center center",
      snap: [0, 0.316, 0.421, 0.526, 0.632, 0.737, 0.895, 1],
      end: speeds[vars.speed] || "+=1000",
      scrub: 1
    },
    ctx = gsap.context && gsap.context(),
    animation = lottie.loadAnimation({
      container: target,
      renderer: vars.renderer || "svg",
      loop: false,
      autoplay: false,
      path: vars.path,
      rendererSettings: vars.rendererSettings || {
        preserveAspectRatio: "xMidYMid slice"
      }
    }),
    frameAnimation;
  for (let p in vars) {
    // let users override the ScrollTrigger defaults
    st[p] = vars[p];
  }
  frameAnimation = vars.timeline || gsap.timeline({ scrollTrigger: st });
  if (vars.timeline && !vars.timeline.vars.scrollTrigger) {
    // if the user passed in a timeline that didn't have a ScrollTrigger attached, create one.
    st.animation = frameAnimation;
    ScrollTrigger.create(st);
  }
  animation.addEventListener("DOMLoaded", function () {
    let createTween = function () {
      animation.goToAndStop(playhead.frame, true);
      frameAnimation.to(playhead, {
          frame: animation.totalFrames - 1 - (vars.endFrameOffset || 0),
          ease: "none",
          duration: frameAnimation.duration() || 1,
          onUpdate: () => {
            animation.goToAndStop(playhead.frame, true);
          }
        }, 0);
      return () => animation.destroy && animation.destroy();
    };
    ctx && ctx.add ? ctx.add(createTween) : createTween();
    // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
    ScrollTrigger.sort();
    ScrollTrigger.refresh();
  });
  animation.frameAnimation = frameAnimation;
  return animation;
}
</script>

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates 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 dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

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. ✅

[Rodrigo]

Hi,

 

Sorry about the issues. I can guarantee you that in the time span you mention (1 month ago) nothing has changed GSAP wise. We haven't updated neither the GSAP Core, ScrollTrigger or our helper function (which doesn't really matter since you have that particular function directly on your script. I can't think for a single reason for this to happening that falls on our end, I just updated a few demos I have here in my local machine that use ScrollTrigger and our lottie helper function and can't see any performance problems.

 

The first thing you can try is open your devtools and check the performance tab and see what you're seeing there. Also check different browsers in order to see if there is something browser specific or a more general problem.

 

Sorry I can't be of more assistance, but performance is a very deep topic that normally boils down to browser rendering.

[MichielKnoppert]

Thanks Rodrigo

 

i’ll try and figure out what’s happening on the Squarespace side of things. Maybe switch to another platform.