Jump to content
Search Community

How to optimize TweenLite on scroll?

gani test
Moderator Tag

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

Hi,

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;
$(window).scroll(function(){
		    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;
$(window).scroll(function(){
var scrollPosition = $(this).scrollTop();
if ( scrollPosition > lastScrollTop ){
   TweenLite.to('.red',2.5,{y:"+=50",ease:Quad.easeInOut},0.25);
} else {
   TweenLite.to('.red',2.5,{y:"-=50",ease:Quad.easeInOut},0.25);
}
lastScrollTop = scrollPosition;
});

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

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