search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.88k stars 2.17k forks source link

Jumps/lags only occuring in Chrome #867

Open jingqi-jingqi opened 5 years ago

jingqi-jingqi commented 5 years ago

Hello, first of all, thank you for this amazing plugin!

Possibly related to #866 however, when I tried the disable threaded scrolling method, problem persists.

While coding my site, I used ScrollMagic to trigger a fade up animation with TweenMax in the home page. I don't think image sizes are an issue since the first few images are around 100kb. I am also using transform(y in tweenmax) instead of using top which I've read in other posted issues that might pose a problem.

I tried testing in both Safari and Firefox, the animations were smooth as butter without any jumps or lags. In chrome, the issue is most prominent when you first scroll down the page, or when you are scrolling faster. If you scroll really slowly, the animation doesn't seem to jump in chrome.

Please let me know if you have any pointers on what might be the issue.

The page is here

jingqi-jingqi commented 5 years ago

I partially solved it by adding a CSS transition to the trigger element I was using for scroll magic like so: transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1); Still not sure why Chrome doesn't seem to want to work...

alioshr commented 2 years ago

@jessicafanfan Hi there.

I am facing something similar. I am trying to use element.prototype.scrollIntoView(), experiencing lags as well, only on Chrome. As I am doing this imperatively, though a callback, I am not sure if this solution will work. When I try to add an event handler with passive: true the scroll is very slow, but still laggy.