Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Anchors within pinned section #143

Closed
rogeranderson opened this Issue · 6 comments

3 participants

rogeranderson James Krot Jan Paepke
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
ss_superscrollerama_pin

James Krot
Jan Paepke
Collaborator

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

Jan Paepke janpaepke self-assigned this
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');
            }
        });
    }
Jan Paepke
Collaborator

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!

Jan Paepke
Collaborator

Cool! Glad I could help!

Jan Paepke janpaepke closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.