SuperScrollorama - Tweened Margin-Right Jumps from 0 to something random, then doesn't return to 0

[RobMethven]

Hello!

 

First of all, I know that this is not necessarily the right place to be looking for answers regarding SuperScrollorama since it's completely separate. But it does seem as though this is a good place to at least ask the question. 

 

I'm trying to design a single-page site, and have run into a problem. The effect I'm aiming for is:

 

A fixed, centered <ul> navigation at the top of the page. On scrolling down, the menu will break apart between the 3rd and 4th <li> and create a space of 250px, into which the logo will scroll (and shrink) and then remain for the duration. 

 

I'm achieving the effect by adding a margin-right to the third <li> element, and this is what i want to be animated against the scroll position. However, although the page loads correctly, with the margin-right at 0, as soon as the page starts to scroll the margin-right jumps straight to a number around 180px, before scrolling smoothly for the duration that I need it to. Then, on scrolling up, it animates smoothly but only returns to the random 180px value instead of 0.

 

Here's a JSfiddle: http://jsfiddle.net/aTz4X/5/

 

It's just that initial jump that's the problem. I've been trying to figure it out for days, but can't get to the bottom of it.

 

Any help or pointers would be much appreciated.

 

Rob

[Carl]

Hi Rob,

 

Welcome to the GreenSock forums.

 

Thank you for acknowledging that this isn't a SuperScrollorama forum. Frankly, I haven't used it much but your fiddle was so simple (THANK YOU) that I felt compelled to try to solve it.

 

I think the fact that you element had position fixed and that it was already in view may have confused superScrollorama. I'm really not sure.

 

I did find that using the pin() method achieves the results you want, at least for this reduced test case.

 

Take a look here:

 

http://jsfiddle.net/aTz4X/6/

 

I wish I could explain more of the how and why, but coming to this solution stretched my SuperScrollorama knowledge pretty far beyond what it was

 

You can also get SuperScrollorama help here: https://github.com/johnpolacek/superscrollorama/issues?page=1&state=open

[RobMethven]

Yes! Thank you so much!

 

Since I was only animating within an already-fixed area, I don't think I even considered using the pin method. 

 

I've plugged it into the site, and it works on there too. I'm still just a beginner really, so your help is massively appreciated!

 

Thanks again!