Skip pinned element

[BenjoJ]

Hi. This is a really powerful plugin and I am so glad I stumbled across it.

I have a pinned div element which stretches to the size of the screen and has some basic animation in the form of images sliding in as you scroll.

controller.pin('#Screen2', 4000, {
    anim: (new TimelineLite())
      .append([TweenMax.to(jQuery('#img2'), .5, { css: { marginLeft: 0 } })])
      .append([TweenMax.to(jQuery('#img3'), .5, { css: { marginLeft: 0 } })])
      .append([TweenMax.to(jQuery('#img4'), .5, { css: { marginLeft: 0 } })])
}, 2000);

At the bottom of this "Screen2" element I have a button which fires a scroll event, so the user can skip down to the next screen.

var offset = jQuery("#Screen3").offset();
jQuery("html,body").animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
}, 1000, 'easeOutQuart');

The problem I have is I do not want the animations in the pinned element to fire when the above scroll function is fired. I want it to just scroll to that element smoothly. What happens is that all the elements in the tween animation fire in one by one and when they have finished, the page scrolls to the desired element.

I have tried using the removePin function, but this disables the pin completely after you have scrolled. I tried firing the controller.pin function again after the scroll event has finished, but this causes the screen to jump back up to the pinned element (Screen2).

Is there anything I can do to get around this please?

Thanks

Ben

[janpaepke]

Hi Ben!

Glad you like the plugin.
Superscrollorama has ben superseded by ScrollMagic.
The logic is quite similar and I'm sure you'll have an easy time refactoring your code to ScrollMagic.

Once you did, you can make use of ScrollMagic's "enabled" method to temporarily disable the animations from happening: http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Scene.html#enabled

Should you have any problems moving to ScrollMagic or implementing this, please follow ScrollMagic's troubleshooting guide and/or post an issue.

best regards,
Jan

[BenjoJ]

Ah, perfect thanks. I'll give it a go.

[BenjoJ]

Hi Jan

I am using the 'enabled' method, but it appears to only work the first time I am using it. When the function below is called for the first time, it does indeed disable the scene. However, from then on, calling this function does not seem to disable the scene. Am I doing something incorrectly here?

function scrollToEl(sID) {
if (jQuery(sID).length) {
PhilosophyScene.enabled(false);
var offset = jQuery(sID).offset();
jQuery("html,body").animate({
scrollTop: offset.top - 0,
scrollLeft: offset.left
}, 1000, 'easeOutQuart', function () { PhilosophyScene.enabled(true) });
}

}

Thanks for your continued support.

Ben

[janpaepke]

It looks like ScrollMagic code.
Please repost it in ScrollMagic support and try to give more context. A jsfiddle if possible.