ScrollTrigger in Observable: bouncing and jumping?

Hi friends, I am writing a short tutorial about how to use GSAP’s ScrollTrigger in Observable, but in the actual scroll-animated data viz, there existing some bouncing/shaking of the whole cell while scrolling…

This might be more of a GSAP problem too? I tried this solution and it didn’t work. Therefore, I’m here. I would like to know if I should write anything else specific to Observable?

Many thanks ahead.

1 Like

I see that if I load the notebook on my 4k screen I get the bouncies (chrome bounces more than firefox) but when I put the notebook onto my 1080p display I get no bouncies.

By using em instead of pixels the bounce also goes.

  const tween = gsap.to(div.querySelector(".orange p"), {
      scrollTrigger: {
        trigger: div.querySelector(".orange"), 
        scroller: div,
        markers: true,
        start: "top center",
        end: "top 150em",
        scrub: true
      },

So I guess it’s some issue with the display pixel density (which is often the problem).

Update: Swapping the notebook back and forth between displays broke it again :frowning: until the cell was rerun, sometimes. It seems intermittent.

1 Like