Jump to content
Search Community

Using scrollTo but ease problem (stutter)

Oscar Rottink 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

It's been way too long since I used GreenSock but now I've time, a nice idea and trying to get my ideas to work. I think this is a very simple problem but I don't get it.

 

I have a list which is scrollable and that works, also there is a dial which reflects the current state of the scrollable list. The problem is that the tween of the LI's is not very nice at the top (number 0) or at the bottom (number 9).

 

You see it stutters there. I thought that might have to do with margin/padding of the LI's or UL but I don't see it makes any difference. So what am I doing wrong? I tried to look for a solution but it's a bit hard to find the right search words.

See the Pen wJOXzY by OzBoz (@OzBoz) on CodePen

Link to comment
Share on other sites

Hi Manfred,

 

Not really, I think this image makes it a bit more clear

 

list.png

 

The center number of the list will be the active option. For now I use the scrollbutton but if all works well I also want to use dragable so you can also use it very well on tablets etc.

 

But in my codepen youll see that if you scroll somewhere there's that elastic tween. That's ok for now. But if you are at the entire top or bottom of the list the Elastic tween seems cut off. It doesn't animate smooth like the in between options. That's why I thought it might have to do with some room after/before the LI's.

I tried several things but it keeps stuttering. I also thought that it might have to do with overwrite:true but that also didn't make a difference. I'm using Chrome but I guess the problem is visible in other browsers as well.

Link to comment
Share on other sites

I think the stuttering is due to the fact that scroll positions snap to whole pixel values.

For something like this you would probably do better creating an tween that performs a y translation. You could still track scrollwheel changes to figure out how far to move the elements. 

  • Like 1
Link to comment
Share on other sites

I think the stuttering is due to the fact that scroll positions snap to whole pixel values.

For something like this you would probably do better creating an tween that performs a y translation. You could still track scrollwheel changes to figure out how far to move the elements. 

 

But if I would understand it right in your theory everything would stutter, but here it only is bad at the top or bottom. Not sure if you guys see what I see so made a little clip. https://fizion.nl/zooi/list.mp4

Link to comment
Share on other sites

The pixel snapping is the most evident towards the end of the tween due to the ease. There are only very small sub-pixel variances at the end whereas at the beginning you are moving much greater distances over short amounts of time. 

 

Here is a reduced test:

 

var duration = 10;
var ease = Elastic.easeOut;
var end = 200;

TweenLite.to(".green", duration, {x:end, ease:ease});
TweenLite.to(".orange", duration, {left:end, ease:ease});//snaps to whole pixel values

http://codepen.io/GreenSock/pen/OpGwzK

 

Notice how both animations look good at the beginning but the orange / left div gets all jerky at the end due to the pixel snapping?

 

I'm open to other ideas but this is my best bet.

  • Like 2
Link to comment
Share on other sites

I'm open to other ideas but this is my best bet.

 

I see what you mean but that wouldn't explain why it's only in the end. And I think I do transform y (the scrollTo). But if you go to my first codepen  and you scroll really fast with the mouseWheel you see it's not subtile, the elastic tween is just like it's blocked.

 

Now I changed a few things (don't use Scrollto anymore) and it's very smooth 

See the Pen gmydRr by OzBoz (@OzBoz) on CodePen

(even if you scroll like crazy).

 

So I'm happy with the second one but I wonder what's different in using scrollTo with same easing and the one without. For my personal common sense they should give the same result.

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