Jump to content


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

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



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.



Link to comment
Share on other sites

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:




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 8-)


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

Link to comment
Share on other sites

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!

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.