johnpolacek/superscrollorama

Skip pinned element

BenjoJ opened this issue · 4 comments

BenjoJ commented

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 commented

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 commented

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

BenjoJ commented

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 commented

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