Hi, thanks for your script, this is totally amazing!
Im trying to do my own portfolio using it... but i begin to ask myself if this was a mistake or not.
Please check my website using superscrollorama, and scroll down to the "processus" section. It will be easier to see what im talking about: http://www.thomaslartaud.com
When i scroll down to the end of the processus section, and then scrollback, the script bug, and tweens go to wrong values, that makes the scroll animation stops at the wrong place.
This is how i Pin the Processus Section:
$(document).ready(function() {
controller.pin($('#processus'), $('#etape_controllers').height(), {
anim:null,
spacer:'50px',
onPin: function() {
$('#processus').css({height:'100%',top:'0px'});
$('html').getNiceScroll().onResize();
},
onUnpin: function() {
$('html').getNiceScroll().onResize();
});
And there, this how i use some empty div to control when animation should start.
$(document).ready(function() {
controller.addTween($('#controller1'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '0px -12px'}})
);
controller.addTween($('#controller1'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '0px'}})
);
controller.addTween($('#controller2'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '210px -222px'}})
);
controller.addTween($('#controller2'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-550px'}})
);
controller.addTween($('#controller3'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '420px -432px'}})
);
controller.addTween($('#controller3'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-1100px'}})
);
controller.addTween($('#controller4'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '630px -642px'}})
);
controller.addTween($('#controller4'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-1650px'}})
);
controller.addTween($('#controller5'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '840px -852px'}})
);
controller.addTween($('#controller5'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-2200px'}})
);
controller.addTween($('#controller6'),
TweenMax.to($('#processus_background'), .5,
{css:{backgroundPosition: '1050px -1062px'}})
);
controller.addTween($('#controller6'),
TweenMax.to($('#processus article ul'), .5,
{css:{top: '-2750px'}})
);
});
When i navigate this section really, really slowy, there is no bug. I think there is a problem on tweens with chainability. Maybe that each tween are executed separately, which makes some unwanted decals.
Please could you helps me to find a fix to this ? I tried so many things, so many different syntax, i tried to use timeline, i tried to uses tweens in a same controller with the append function, and more ... Nothing worked. I always got the same random buggy result. I'm about to finish this website, i just hae to find where that f**** bug comes from ...
Please help me. Just spent two completes days on that bug... If i cant resolve, i'll have to remake all the website with another solution, and i don't want to do that :(
Please help!