Anchors within pinned section

[rogeranderson]

Hi, I have 4 animations working correctly within a pinned section. I'd like to add the option of using anchor links inside the pin to scroll to each animation as well as manual scrolling. I'm stumped on how to integrate both. Is there an example of this anywhere or suggestions how it can be done? Hopefully this screenshot helps. Thanks! Roger

[jkrot]

I did this on optimine.com http://optimine.com/js/pp_scripts.js

The one thing that always bothered me that using anchor links the animation would either be at the start or the end but not always consistent. For example I am at the top of the page and I use the anchor link and animation is at the beginning, but if I am at the bottom of the page and use the anchor like it is at the end.

On Fri, Jan 31, 2014 at 12:12 PM, rogeranderson notifications@github.comwrote:

Hi, I have 4 animations working correctly within a pinned section. I'd like to add the option of using anchor links inside the pin to scroll to each animation as well as manual scrolling. I'm stumped on how to integrate both. Is there an example of this anywhere or suggestions how it can be done? Hopefully this screenshot helps. Thanks! Roger [image: ss_superscrollerama_pin]https://f.cloud.github.com/assets/632973/2053179/2006dcb2-8aa3-11e3-83eb-dad6220939e7.png

Reply to this email directly or view it on GitHubhttps://github.com/johnpolacek/superscrollorama/issues/143 .

[janpaepke]

Hi Roger,

did James' answer help you? If not please supply a demo so we can better understand what you are trying to achieve.

regards, Jan

[rogeranderson]

Hi and thanks for the feedback.

The js file did help a bit. The main difference is I'm trying to make the nav anchors work inside a section that's already pinned, not the entire page. So it seems like I need to use nested pins. I'm having problems getting a demo to work in Codepen but I'll keep trying. Instead I'll paste the code I'm working with.

Basically, I can get the '.pin-block' section to pin and animate when scrolling, but can't get the anchor links to perform the same animation.

So I've tried calling the each panel animation from inside of the onPin event of the '.pin-block' section. But this makes the first animation repeat without scrolling to the second.

Sorry if this is confusing. Hope the code helps:

    <section class="pin-block">
        <div class="panels">
            <ul class="panel-nav">
                <li class="panel-nav-1"><a href="#panel1">Complete Calendar</a></li>
                <li class="panel-nav-2"><a href="#panel2">Easy Attachments</a></li>
            </ul>
            <div class="panelbed-content">
                <article id="panel-1">
                    <div class="inner">
                        <h1>Conquer Your Calendar</h1>
                        <p>Switching between your email and calendar apps is now a thing of the past. Easily view your calendar, share available meeting times, schedule meetings, get reminders, and more, all tightly integrated with email. </p>
                    </div>
                </article>
                <article id="panel-2">
                    <div class="inner">
                        <h1>Easy Attachments</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, voluptatem, reiciendis aut incidunt illo quis et velit voluptatibus dolorem eos sed dicta optio quasi doloremque dolore maiores ipsam eaque suscipit!</p>
                    </div>
                </article>
            </div>
        </div>
    </section>

    var controller = $.superscrollorama({
        isVertical: true,
        triggerAtCenter: true,
        playoutAnimations: true,
        reverse: true
    });

    // Anchor links should scroll to specific panel inside pinned section
    $(".panel-nav > li > a").on('click',function(event) {
        event.preventDefault();
        var panel = $(this).attr('href');
        $('html').animate({scrollTop:$(panel).offset().top}, 500);
    });

    // Main pin section (964px tall)
    controller.pin($('.pin-block'), 964, {
        onPin: function() {
            panelScroll(); 
        }
    });

    // call individual panel animations
    function panelScroll(){
        panel1();
        panel2();
    }

    // Individual animations for each panel
    function panel1(){
        controller.pin($('#panel-1'), 482, { // 964/2=482 (half the height of the pinned section)
            anim: new TimelineLite()
            .append([TweenMax.fromTo( $('#panel-1 .inner'), .2, {css:{opacity: 0}}, {css:{opacity: 1}})]),
            offset: 0,
            onPin: function() {
                $('.panel-nav-1').addClass('active');
            },
            onUnpin: function() {
                $('.panel-nav-1').removeClass('active');
            }
        });
    }
    function panel2(){
        controller.pin($('#panel-2'), 482, {
            anim: new TimelineLite()
            .append([TweenMax.fromTo( $('#panel-2 .inner'), .2, {css:{opacity: 0}}, {css:{opacity: 1}})]),
            offset: 0,
            onPin: function() {
                $('.panel-nav-2').addClass('active');
            },
            onUnpin: function() {
                $('.panel-nav-2').removeClass('active');
            }
        });
    }

[janpaepke]

Hi roger,

I think I understand. An anchor link tries to scroll to where the respective element would touch the top of the screen. The thing is, as long as they are inside a pinned div this could never happen. So if you want to scroll at a certain point within the pin (NOT when the respective element touches the top) this would be changing the behaviour of anchor links. So here's how I'd approach it: You're pinning the block for a duration of 964px. so you need to figure out to which point in this duration the anchor link should scroll to and give this information to the respective link. Like this:

<a href="#panel1" data-scrolloffset="300">Complete Calendar</a>

This would mean it should scroll to 300 px after the pin has started. Then catch the click to these links like this [untested code]:

$("a[data-scrolloffset]").on("click", function(e) {
    e.preventDefault();
    var
        pinStartPos = $("section.pin-block").prev("div.superscrollorama-pin-spacer").offset().top,
        targetPos = pinStartPos + $(this).attr("data-scrolloffset");
    $(window).scrollTop(targetPos);
});

Hope this helps!

regards, J

[rogeranderson]

Yes, that works! The key was to use the data attribute like you said instead of the anchor link.

Thanks Jan!

[janpaepke]

Cool! Glad I could help!