Angular.js: autoscroll on long pages with animation causes ugly page jump

[lobodpav]

I have a site where user is navigating via top menu and pages are injected via ngView.

Having animations on long pages with autoscroll on ngView causes problems when user scrolls down on one page and then goes to another. The second page is transitioned including remembered scroll and then jumps to the top.

Reproduction steps:

1. Open http://jsfiddle.net/lobodpav/jfLcx/2/ in WebKit browser
2. Click Link1
3. Scroll down
4. Click Link2
5. Expected result: Page2 is scrolled up and nicely animated
6. Actual result: Page2 is first animated and then jumps to the top causing an ugly effect

[matsko]

Yes, ngView performs the autoscroll after the animation is complete, but the other option is to do it before, or for both before and after. Or ignore it entirely if animations are used.

Before we think about this as a problem in and of itself, how can it be handled differently?

[lobodpav]

I would love to know of another "easy" way. Have been playing around with this yesterday without success.

The only way I could think of so far is to implement own animation which would scroll prior executing the animation. But this is a bit overkill :(

Actually, your idea sounds pretty good. Having a possibility to say when to scroll makes sense.

[matsko]

The API could get a bit complicated having this configuration. Would just using your own code and detecting the animation using DOM callbacks be enough?

[lobodpav]

If that would solve the problem, I could wrap it into a directive and apply it on the BODY element.

Could you please update the JSFiddle so that I have an example of what was your thinking on the solution?

Anyway, anybody having the same issue would need to implement bunch of code to get the animations working. I would assume it is quite common having pages vertically longer than the screen so that this issue must appear often.

[matsko]

Here's an example with just detecting the routeChangeStart event: http://jsfiddle.net/jfLcx/3/. This way you can decide whether to animate before or after.

[lobodpav]

Thanks a lot. That is pretty simple and works!

However, when I think about how to do it perfectly, I would likely need to animate it by writing my own custom animation code/view because there are a few things which does not make the animation nice:

• When scrolling down and clicking the other link, the screen blinks by scrolling on top and then animation is started
• The border seems not to be animated at all

The perfect way would be:

• The current view would fade out on its current position
• The new scolled-up-view would fade in

This way the user would see perfect animation between two independent pages.

[matsko]

@lobodpav is this still something that needs to be worked on? Did you come up with a workaround?

[lobodpav]

I ended up using the animation the way you proposed.
However, I still do not like the flicker effect when the page is scrolled up as per my comment above.

Is this something what can be solved in an elegant way?