If someone can figure out what's going wrong you'll make me very happy.
I've had this issue with and without using Superscrollarama so I'm now thinking my issue is with the Raphael plugin. Basically I'm drawing shapes using Paper.path() and mostly just scaling the paths up and down. When I reverse the animation the animation jumps/breaks.
Here's a bare bones example without Superscrollarama:
// adding paper.path()'s excluded
var tl = new TimelineLite({useFrames: true});
tl.pause();
var tl1 = new TimelineLite();
var t1 = [];
paper.forEach(function(path){
t1.push(TweenLite.to(path, 1, { raphael: { scaleX: '+=3', scaleY: '+=3'}}));
});
tl1.append(t1);
var tl2 = new TimelineLite();
var t2 = [];
paper.forEach(function(path){
t2.push(TweenLite.to(path, 1, { raphael: { scaleX: '-=3', scaleY: '-=3'}}));
});
tl2.append(t2);
tl.append(tl1);
tl.append(tl2);
$(window).on('scroll', function(){
var pct = $(this).scrollTop() / ($(document).height() - $(window).height());
tl.progress(pct);
});