Jump to content
Search Community

Animation Glitchy when scrolling page

TShelton41 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I have created a very simple animation that animates HTML sections onto the page when the page is scrolled. When I scroll I notice some glitching on the animation. I have tried CSS animation and it works fine, but want to understand why I'm having this issue with GSAP. I have attached the codepen I have created and when you scroll a little faster on the page you will notice the issue. 


Thank you, 


See the Pen ?editors=010 by trshelto (@trshelto) on CodePen

Link to comment
Share on other sites

The main reasons why you might have seen performance problems are:


  1. onscroll events fire VERY rapidly. when you scroll just a little bit, you could easily fire 50-100 scroll events.
  2. on each onscroll you are creating new tweens and overwriting previous tweens. This takes  more overhead than just directly setting a css property 


In other words you were doing too much too often. Diaco's solution should work great for you because it creates the tweens in advance and only play() / reverse() them when necessary.


Another thing you can do is throttle how often you update based on scroll position changing. This thread has some great techniques and demos: http://greensock.com/forums/topic/11155-how-to-optimize-tweenlite-on-scroll/?hl=throttle#entry44972

  • Like 5
Link to comment
Share on other sites

Great point about throttling! It's very easy to overlook how many times an event will fire. Another technique that is similar to throttle is debounce. While debounce is probably not ideal for a scrolling animation, it works great for other events that can be postponed, like window resizing. This article has a pretty good elevator analogy about the difference between throttle and debounce and a mouseover visualizer.




Here's a quick demo I made using lodash's throttle and debounce methods. Notice how throttle counter still gets updated at a restricted pace, but the debounce counter won't update until after you stop resizing the window.


See the Pen OymRmv?editors=001 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

To add my two cents to all these fine Gentlemen!


My suggestion Is to also add a requestAnimationFrame callback inside your scroll event handler so when you apply your animation or changes, that your tweens  initialization are timed to the visual update of the browser. Since scrolling can cause a tremendous amount of re-compositing and re-paints.


This following article explains a nice little solution with using requestAnimationFrame along with throttle and debounce. But the real magic is to only run your animation with the requestAnimationFrame callback for a better performance driven scroll animation, Due to what Carl described above regarding the onscroll event firing multiple times, like the resize event




The solution in that article makes sure you are only triggering your animation on the last scroll, and then runs your animation using the requestAnimationFrame callback. Even though GSAP uses RAF to animate, this solution also makes sure your tweens run on the next frame, after the last scroll event is fired and stopped.. so to prevent jank, overlap, and reflow (the calculation of positions that change in order to render them).


Just my two cents for what it is worth :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...