Jump to content
GreenSock

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

gsap gave no difference on my jquery scroll animation

Recommended Posts

Hi,

 

I have been struggling with jquery animate jaggy animation anf I came across gsap.

 

I checked your online jquery plugin demo and I can see that it has improved a lot compare to native jquery.

 

I tried to use it on my page but it I don't see noticeable change on my animation.

 

Here is my comparison version

 

http://prompter.rareapps.org/prompt/jqueryscroll.php?p=123

http://prompter.rareapps.org/prompt/gsapscroll.php?p=123

 

Did I do something wrong that makes gsap not firing or my scroll animation wont improve even with gsap?

 

Please let me know if my jerky scroll animation can be smoothen by gsap.

 

Thanks

 

 

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

There are a few things to notice.

 

First you're animating the scroll value of the element and is mentioned in the jquery.animate plugin documentation, that scrollTop/Left are not supported, so to speak, so basically what happens is that GSAP reads your code and turns it back to jQuery. Finally in both samples jQuery is animating the scroll, that's why there's no noticeable difference. Read the Caveats part and FAQ number 6 of this link:

 

http://www.greensock.com/jquery-gsap-plugin/

 

Second, instead of animating the scroll position why don't you try GSAP's ScrollTo Plugin, is quite simple to use, you can attach it to any GSAP instance and the results are great and you can control the tween with great ease. In fact a solution for your scenario would be to create a paused tween that scrolls the element to the bottom, then on the button event you can play the tween at a normal speed and if you hold the control key you can play the tween but with a higher timeScale, which makes the tween go faster, that will save you quite some lines of code. Take a look here:

 

ScrollTo Plugin

http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html

 

TimeScale method:

http://api.greensock.com/js/com/greensock/core/Animation.html#timeScale()

// create a tween that animates the scroll to the bottom using the string 'max'
var scrollTween = TweenLite.to($("div"), 20, {scrollTo:{y:'max'}, paused:true});

// then the key events to control the tween
if (e.keyCode == 38 && e.ctrlKey)  
{
  // reverse the tween 4 times faster than normal
  scrollTween.reverse().timeScale(4);
}
else if  (e.keyCode == 40 && e.ctrlKey)  
{
  // play the tween 4 times faster than normal
  scrollTween.play().timeScale(4);
}
else if (e.keyCode == 38)
{
  // reverse the tween at normal speed
  scrollTween.reverse().timeScale(1);
}
else if (e.keyCode == 40)
{
  // play the tween at normal speed
  scrollTween.play().timeScale(1);
}

Also remember to include the ScrollTo Plugin in a respective <script> tag.

 

Rodrigo.

  • Like 2
Link to post
Share on other sites

My bad, I forgot the key-up part of the code:

$(document).keyup(function(r)
{
  if (r.keyCode == 38)
  {
    scrollTween.pause();
  }
  if (r.keyCode == 40)
  {
    scrollTween.pause();
  }
});

That should take care of the tween being paused.

 

As for the animation being smooth, unfortunately there's not much it can be done. Scrolling can be quite a handful for the browser some times because it doesn't have to take care of what is on the screen now, but what is coming. To see what I mean, resize the browser window so it's approximately half of the screen size, you'll notice that the animation is quite smoother, this has everything to do with rendering and not GSAP. 

 

One choice could be use force3D:true in the tween config object:

var scrollTween = TweenLite.to($("div"), 20, {scrollTo:{y:'max'}, force3D:true, paused:true});

This will basically pass the element to a layer in the GPU, which could improve performance.

 

Another possibility is that perhaps scrolling doesn't support sub-pixel rendering, which basically means that every time the value for scrollTop is calculated the browser rounds it to a whole number. If so you could translate that particular element in the Y axis and use force3D as well, that will ensure sub-pixel rendering:

var elementHeight = $("div").outerHeight() - $(window).height(),
    scrollTween = TweenLite.to($("div"), 20, {y:elementHeight, force3D:true,paused:true});

The rest of the code, that is the key event handlers, remains the same, another flexibility of GSAP.

 

Also you can find all the free tools of the library in CDNJS, which can make it faster to access:

 

http://cdnjs.com/libraries/gsap

 

Rodrigo.

  • Like 1
Link to post
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.

×