Superscrollorama Reverse scroll issue

[raesquared]

Wonderful tool! But I have a question and I think this may chalk up to my jquery knowledge more than anything.

Here is my giant work in progress! http://stage.aftonpalmer.com/uop/index.html

Everything I've done has worked so smooth as you scroll down the website (very WIP so far), but when you scroll in reverse back to the top, the timing of pins and what not seem completely off. (For example, the fade effect in reverse rolls through the fade effect twice, even three times instead of once). I would like this site to be seamless when you scroll down and back up.

Am I missing or misunderstanding a bit of code?

Thank you in advance!

[janpaepke]

Hi!

On a first glance it is difficult for me to figure out what causes the problem on your demo. My guess is that it has to do with one of the main issues of superscrollorama that a lot of users faced: The behaviour of the spacers, just expanding when reaching a pin trigger.

What I think is happening is that the spacers expand and colapse at the wrong times when scrolling up, causing the page to reach a certain scrollpoint multiple times, which in turn causes your animations to be played multiple times. I am actually at the moment working on a complete rewrite of superscrollorama that includes many changes, first and foremost fixing this (annoying) issue.

In the meantime you should try what I suggested to a couple of other people allready: set "pushFollowers" to false and create your own spacers after your pinned elements. For example if you want to pin it for 5000px put in an empty div after the pinned element with the height of 5000px.

Let me know if this helps in this case, regards, J

[raesquared]

Thank you for the reply and the advice!

However it doesn't seem like that pushFollowers setting + empty div is doing the trick unfortunately. I appreciate the advice though!

[janpaepke]

Okay, here's another approach. If you use elements both as triggers (where should something start) and the target of animations (what should start) there might be some problems: If you animate the position of elements or when pinning them their offset positions are changed. So what I suggest is: Keep the triggers (first argument in addTween or addPin) and the Animation Targets (first argument for TweenMax) seperate. And make sure the triggers don't change position.

regards, Jan

[raesquared]

This might do the trick! It has worked on a bulk of the elements, theres one that still skips but I'll research more into my code and make sure positions aren't shifting around.

Thank you SO much for the fast response and great advice, it's really helped and I appreciate the time :)

[janpaepke]

You're welcome! :)