Play through pinned elements in superscrollorama

Question

I am building a Parallax website using SuperScrollorama 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 Basic jquery using scrollTop event, using Jquery ScrollTo and using Tween Lite ScrollTo plugin 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...

With Jquery ScrollTo, my code:-

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

With basic scrollTop jquery, 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:- http://jsfiddle.net/tFPp3/6/

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?

I've got your same problem with my company website ( http://www.thisisembrace.com ). It ended up TweenMax is a great animation platform, but when you use it for scrollable stuff it unleashes all it's problems. I suggest you to totally drop scrollorama and tweenlite and stick with the simple scrolltop and maybe animating the elements with callbacks and stuff, or much better, start using css3 (example: http://tympanus.net/Development/PageTransitions/ ) — MacK, Aug 30 '13 at 09:35
@MacK but how to apply idea of simple scrollTop, i am trying to navigate through hash tags its not a success so far as my demo shows? — SaurabhLP, Aug 31 '13 at 05:13
Scrollorama is changing the height of your divs while the scrolltop animation is running. I'd go for something like this: http://jsfiddle.net/tFPp3/7/ — MacK, Aug 31 '13 at 09:15
@MacK that is fine but my template is fully related to Superscrollorama, i have some animation in my mind that i have to implement, may be disabling Superscrollorama will not be a good solution... — SaurabhLP, Sep 02 '13 at 05:29

svassr · Answer 1 · 2013-09-05T05:47:40.153

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

hii @svassr thanks for reply... i think the logic behind this idea is right but i think their is some issue here... check http://jsfiddle.net/tFPp3/8/ — SaurabhLP, Sep 05 '13 at 05:47
Unfortunately I haven't found a way to avoid using a timeout here. — svassr, Sep 05 '13 at 05:51
i think we are close, it makes an console error for "offset is undefined" when you go to the last slide... http://jsfiddle.net/tFPp3/9/ — SaurabhLP, Sep 05 '13 at 05:55
yep because there is no nextpage in this case hashes[4] is undefined. Just ad a test there to avoid that error. Also I have noticed that by adding +1 to check for the next I didn't cover the case when you'd jump from first to third section for example. I'm sure you'll be able figure this out from there. — svassr, Sep 05 '13 at 06:09
my question have a bounty ending in 1 hr, can you finish this so i can reward you... i have created the demo and trying to update but unable to do so.. — SaurabhLP, Sep 05 '13 at 06:42

score 1 · Answer 2 · answered Sep 19 '13 at 16:09

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 just gone through your code, i understand the logic behind this, but i cnt achieve the result by this, what i have tried is this... http://jsfiddle.net/tFPp3/10/ — SaurabhLP, Sep 23 '13 at 05:03

score 0 · Answer 3 · answered Oct 15 '13 at 16:13

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>

Play through pinned elements in superscrollorama

3 Answers3

Linked