Scrollmagic: Safari Parallax (demo and real-live code) looks super juggy

[nexflo]

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

Your demo in safari...looks extremly jumpy/jiggy/whizzy or just unsmooth (butter smooth in chrome)

[coolheinze]

This seems to be a general issue on Safari (at least on Mac - iOS looks okay-ish). The http://janpaepke.github.io/ScrollMagic/ demo looks awful as well, which is a shame, 'cause it used to look so awesome! :o( Might be a recent Safari update.

[cnewfeldt]

I'm seeing the same thing on Safari and Firefox. Chrome is fine.

[josephniet]

OS: OSX 10.9.5
Firefox v32.0.2 - fine
Chrome v37.0.2062.122 - fine
Safari v 7.1 (9537.85.10.17.1) - juddery (like it momentarily gets reset/goes backwards sometimes?)

[coolheinze]

Safari Version 7.1 (9537.85.10.17.1): Noticed problem pinning. Seems like the pinning spacer has some lag that could cause the judder. Making an element inside the pinned stuff fade in simultaneously made it smooth...? Could be Safari trying to optimise something, which gets a little too optimised.

BTW: Is this a GreenSock issue rather than ScrollMagic?

Update:
Nopes, still judders despite the fading thing. My apologies.
Also, if the spacer is causing the problem, this issue is probably not related to GreenSock.

[janpaepke]

I know what is causing this issue and was already made aware of it by @ihatetomatoes.
I'm quite sure I know what's causing this: to save on performance ScrollMagic doesn't always update on scroll but on tick.
But even though the tick is tested on scroll and should occur before redraw, sometimes there can be delays between the scroll and the actual update of ScrollMagic.
That is why the position is wrong.
I noticed this and asked about this penomenon on stack overflow a while ago:
http://stackoverflow.com/questions/25685608/why-is-an-interval-function-executed-before-an-event-callback

I don't want to get into this too much, but I already have an idea how to address this.

I'll keep you posted.
Thanks for the reports! :)

regards,
J

[janpaepke]

Oh, and it's definitely not a GSAP issue.

[janpaepke]

All right,I fixed it.
Chrome and Firefox are buttersmooth now.
Safari can sometimes still be a bit jittery, but this depends on how much is redrawn at once.
At the moment I have no idea how to make it as perfect in Safari as it is in Firefox an Chrome.

Anyway: While I was at it, I also changed the parallax sections example.
Instead of moving the background I now move the position of a child element.
This has the benefit that I can use percentages and so in responsive environments you wouldn't have to modify the tween if the container's size changes.

I will push the update in the next couple of days.

[janpaepke]

go get it while it's hot. :)

[ThePath]

So its all nice and smooth used in that way. But on your demo you just have the backgrounds with no content in the sections. When you are adding elements that you dont want to move with the background into the section container, you have to either absolute position everything or you have to make the div containing your background image absolute and the other content relative so it overlays it. This method produces the jerky/juggy/jitteriness.

Or am I missing something is there an easier way to have the moving background image with content overlayed and have the background image run smooth?

[janpaepke]

If you have content in front of the parallax element, you should have it positioned absolutely and put it behind the other content either by DOM order or z-index.
Still to my knowledge moving the element using transformY should be the best aproach.

Please note, that there currently are some jitters reported for the parallax effect, and they are being reviewed: https://github.com/janpaepke/ScrollMagic/issues/256

If you're having trouble with the correct markup for this, please post this as a new issue, linking to a fiddle with the setup as far as you've gotten it.

[ThePath]

In your parallax sections demo the background image is positioned relatively. I have recreated your example and it works without jitters but when absolutely positioning the div with background image so to add content in front of it the jitters are quite bad. I will see if I can set up a fiddle.

[GuenniWeb]

by the way a little offtopic but is there a short way to create a scroll effect like on http://www.apple.com/de/macos/sierra/
very nice idea