Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to optimize TweenLite on scroll?

Go to solution Solved by Diaco,

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'm new in gsap and need a little help. I have an animation that triggers on each scroll event and sometimes the animation stutters badly. The fps meter shows values from 9 to 55. (I'm trying to animate divs with png background).


Rough version of my code:

var scrollPosition = 0,
    lastScrollTop = 0;
		    scrollPosition = $myWindow.scrollTop();
    if (scrollPosition > lastScrollTop){
        // --- scroll down
        TweenLite.to($('.boxes'), 2.5, {top: "+=50px", force3D:true, ease:Quad.easeInOut}, 0.25);
    } else {
        // --- scroll up
        TweenLite.to($('.boxes'), 2.5, {top: "-=50px", force3D:true, ease:Quad.easeInOut}, 0.25);

    // --- update last scroll
    lastScrollTop = scrollPosition;

Is there something that I could optimize, must I use timelines etc.?


Any help would be greatly appreciated :)



p.s. sorry for my bad English

Link to comment
Share on other sites

  • Solution

Hi gani  :)


With using x/y property instead of left/top you'll have better performance and smoothest Tweens ; pls try this :

var lastScrollTop = 0;
var scrollPosition = $(this).scrollTop();
if ( scrollPosition > lastScrollTop ){
} else {
lastScrollTop = scrollPosition;

See the Pen RNKEZO?editors=001 by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

With the above optimizations the animations are a lot smoother than before (fps is between 45-65). Thanks everyone :) . 

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