Play through pinned elements in superscrollorama


I am building a <em>Parallax website using <a href="http://johnpolacek.github.io/superscrollorama/" rel="nofollow">SuperScrollorama</a></em> which have some animation frame by frame using jquery and css3...

But after ending up doing so i am stuck in a problem, i am trying to navigate the pages using some scroll plugin...

I have tried <em>Basic jquery using scrollTop event, using <a href="http://demos.flesler.com/jquery/scrollTo/" rel="nofollow">Jquery ScrollTo</a> and using <a href="http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html" rel="nofollow">Tween Lite ScrollTo</a> plugin</em> to navigate through pages but nothing seems to work...

The issue i get after goggling it is if pages are pinned together as position:fixed; and pages doesnot scroll to that position and stuck between...

<strong>With Jquery ScrollTo</strong>, my code:-

$('.menus a').click(function(e){ e.preventDefault(); $.scrollTo(this.hash, 2000, { easing:'easeInOutExpo', offset:3000, axis:'y', queue:true }); });

<strong>With basic scrollTop jquery</strong>, my code:-

$('a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500,'easeInOutExpo'); event.preventDefault(); });

Currently my code works like this:- <a href="http://jsfiddle.net/tFPp3/6/" rel="nofollow">http://jsfiddle.net/tFPp3/6/</a>

As you can see in my demo, the scroll stuck between before reaching the exact position through hash...

What is the solution if i have to play through the pinned elements in Superscrollorama?


You'll have to do 2 animations : one to reach the ancher offset and then, after superscrollorama added new element for animation and recalculate the document height, do the second animation to reach the correct key frame on that page (that you fixed at offset 3000 of that section).

$(function(){ var hashes = []; $('.menus a').each(function(){ hashes.push(this.hash); }); console.log('hashes:', hashes); $('.menus a').click(function(e){ e.preventDefault(); var h = this.hash; var pageTop = $(h).offset()['top']; console.log('pageTop=',pageTop); $.scrollTo( pageTop+1, 2000, { easing:'easeInExpo', axis:'y', onAfter:function(){ setTimeout(function(){ console.log('hashes:', hashes); var id = hashes.indexOf(h); console.log('hashes['+(id+1)+']=', hashes[(id+1)]); var nextPageTop = $(hashes[id+1]).offset()['top']; console.log('nextPageTop=', nextPageTop); var keyOffset = pageTop + 3000; console.log('keyOffset=',keyOffset); if(keyOffset < nextPageTop ){ $.scrollTo( keyOffset, 2000, { easing:'easeOutExpo', axis:'y' }); } },100); } }); }); });

Note that each section offset changes constantly so, before launching the second animation, we have to test that we are not scrolling till the next section again. We also need a little delay here to let superscrollorama make its sauce before testing respective offsets (saddly it doesn't seem to provide an event to do so).


I had the same issue as you. Here's how I went about fixing it....

First of all we know that Superscrollorama adds a spacer pin before your element, it sets the height of the element which defines how long the user has to scroll through a section (the duration)....So in theory all we have to do is add up all the pin heights that happen BEFORE the element you want to scroll to and then offset from the top of that element...

What I did was....

Find out what element you want to scroll to. Check how many supersrollorama-pin-spacers there are before that pin, work out the heights of all of the pins and then offset it to your initial scrollTo function.

pin = $('#pin-id').prev(); //find the spacer pin prevPin = pin.prevAll('.superscrollorama-pin-spacer'); //find all the pins before this heights = []; //create an array to store the pin heights $.each(prevPin, function( index, value ) { value = $(this).attr('height'); //get each height heights.push(value); // push it to array }); //use eval to join all the heights together heights = eval(heights.join("+"));

Now we have the height so lets scroll to it.....

TweenMax.to($('html,body'),1, { scrollTop:heights, });

Good Luck! I hope this helps you.


I have had a similar issue and found that janpaepke on the superscrollorama project added an additional toggle to make this easier.

You can manually add the spacers so you don't need to make adjustments by setting the pushFollowers flag in your pin to false.

Example JS

controller.pin($('#pin-id'), 200, { anim: new TimelineLite().append([TweenMax.fromTo( $('#pin-id'), 2, {css:{opacity: 1}}, {css:{opacity: 0}})]), offset: 0, pushFollowers: false });

Example HTML

<div id="pin-id"> Bunch of Content </div> <div style="padding-top: 200px"></div>


  • ssh tunnel for local (not remote) command execution
  • No engine found. Your build might have failed. Aborting. [predictionio]
  • Member 'object.Equals(object, object)' cannot be accessed with an instance reference; qual
  • lazy loading return null value
  • C# WPF Child Windows inside Main Window
  • Web scraping password protected website using R
  • Cannot read property “length” from undefined. (line 39, file “Code”)
  • How to find the character after second vowel in a string
  • Check/Uncheck - ifChecked not working
  • xpage creates save conflict on save/submit
  • Left join on date range by group ID
  • Android Set Notification after 3 hours [duplicate]
  • dropdown value null when using, viewmodel & modelbinder in asp.net mvc
  • overriding equals and hashcode methods in java?
  • Problem with output_buffering and php.ini
  • Was default_marker removed from mapbox-gl.js
  • Git objects SHA-1 are file contents or file names?
  • javax.el.ExpressionFactory Error when running Spring Boot Application on Google App Engine Standard
  • Xamarin.Forms: How To Populate A Pie Chart From Web API Data?
  • Migrating MOSS 2007 from SQL 2000 to SQL 2005 [closed]
  • IE doesn't display png images
  • android check if file exists with case sensitivity?
  • How to get “crispEdges” for SVG text?
  • Modifying native query cannot have named parameter bindings?
  • Adding horizontal slider to QTableWidget
  • JQuery Mobile Ajax Navigation in Single-Page Template
  • Use AutoIt with java applications
  • Why do you need 2 Javascript files for cross-platform Cordova plugin?
  • How to add html image in to velocity template file to send email?
  • Arraylist of strings into one comma separated string
  • Set SelectedIndex of ListView in FlipView_SelectionChanged event
  • Swift: UIView.animate works unexpectedly
  • Ember.js + JQuery-UI Tooltip - Tooltip does not reflect the model / controller changes
  • How to merge objects within array based on attribute
  • Rotating Towards Path in OpenGL
  • concise way of flattening multiindex columns
  • How to split wav file into two or more parts using c#
  • Content-Type alternative in MQTT
  • How to encrypt Connectionstring written in web.config from codebehind?
  • Call Microservice from another Microservice within Docker