ScrollTo Plugin and ScrollMagic Event

[Jean-Tilapin]

Hello everyone, and happy new year.

I will update my post to add a codepen, but I can't right now. I also know that this is not the right place to talk about Scrollmagic, but my problem also concerns the excellent scrollto plugin, so...

 

Imagine a very simple page (for a form) : half a dozen panels, all full-screen, one after the other. When you scroll up or down, each panel has a sticky effect with ScrollMagic.

On the left, there are fixed indicators used to follow your progression on the form. When a panel becomes "sticky", I call a function to check various stuff on my form and light the right indicator (number "4" when you are on the fourth panel, for example). That works fine.

I also want my user to touch an indicator to scroll to the right panel, using ScrollTo Plugin, and go to the right position. That works fine too. But not exactly :  I always have to scroll up or down juuust a little ; the panel doesn't move, but only then, it triggers the sticky scrollmagic event, firing the necessary callback function.

Of course, I want to synchronize both technics : the regular mousewheel and the scrollTo navigation. I tried to add an offset to force the missing wheelscroll, but no results so far. I had my best results when I added a callback function to the ScrollTo effect, but as this function is also called again as soon as the user scrolls a little, I shouldn't do that.

My code is very basic :

navigate(e){                  
            let $touched = $(e.currentTarget),
                target = $touched.attr('data-target');            
            TweenLite.to(window, 0.5, {scrollTo:{y:target}, onComplete: this._focus, onCompleteParams: [target], ease:Power2.easeOut});
        }


panelLock(){
            var controller = new ScrollMagic.Controller();
            for (let panel of $('.panel')){
                var scene = new ScrollMagic.Scene({
                    triggerElement: panel,
                    triggerHook: 0,
                    duration: '50%'
                })  
                .on('enter', function(event){
                    console.log(target.id);//testing stuff right here
                    })              
                .setPin(panel)                
                
                .addTo(controller);
            }
        }

 

Does anyone know how I could fix that behavior ?

Thank you.

[mikel]

Hey @Jean-Tilapin,

 

Check out this post

 

 

happy tweening ...

Mikel

 

[Jean-Tilapin]

Thank you @mikel

Im' not very comfortable with the idea of de-activating the normal mousewheel scroll, but if there is no other choice...

During my lunch I ran some tests and discovered that a simple function could almost do what I want :
 

navigate(e){                  
            let $touched = $(e.currentTarget),
                target = $touched.attr('data-target');            
            TweenLite.to(window, 0.5, {scrollTo:{y:target}, onComplete: this._adjust, ease:Power2.easeOut});
        }

_adjust(){
          window.scrollBy(0, 1);
        }
//[panelLock function as in the first post]

A simple pixel down after the scrollto magic and the Scrollmagic Scene works (but not through the offset parameter of the plugin) ! The sticky panel gets in position (no movement seen by the user) and the callback function is triggered as it should.

But sadly it only works going down, not up. Is there a way to add the scroll direction as a "onCompleteParams" ? I can't find it in the documentation (but I'm not very good at finding stuff on your forum as I missed the topics you mentioned ;))

[ZachSaucier]

It seems like you want something like this (no need for ScrollMagic): 

 

[Jean-Tilapin]

Yes I could do that, as Mikel also said. But my users could be very confused with the auto-scroll function : on some panels there is a lot of informations to read, and if you start scrolling to center the text into the viewport - like most people do -, bam, you switch to the next panel without asking. I don't really like that. I don't think I'm the only one. But if there's no other choice, I'll do it.

On the other side I really like my small _adjust function, going just one pixel down, and doing just what I want. Is there a way to simply add the scroll direction to that function, allowing to switch between one and minus one pixel ?

[ZachSaucier]

22 minutes ago, Jean-Tilapin said:

On the other side I really like my small _adjust function, going just one pixel down, and doing just what I want. Is there a way to simply add the scroll direction to that function, allowing to switch between one and minus one pixel ?

Sure, you can use the scroll delta to determine which way they are going and adjust based on that.

[Jean-Tilapin]

Ok thank both of you. Greensock is definitely one of the nicest forum on the Internet

So the Scrollto Plugin doesn't have a "getDirection" method or something similar ?

[ZachSaucier]

8 minutes ago, Jean-Tilapin said:

the Scrollto Plugin doesn't have a "getDirection" method or something similar ?

Nope. The ScrollToPlugin is for scrolling to a position, not getting information about the scroll. For information about the scroll, use the scroll event itself: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY

[Jean-Tilapin]

Hi everyone,

I solved my problem with a very simple - and logic - solution (that' why I love coding !). Instead of adding a scrollEvent, I just had to compare the index of what is touched in the navigation and the index of the "current" panel. If it's greater, then we scroll down. If not, up. That's all.

 

navigate(e){                  
            let $touched = $(e.currentTarget),
                target = $touched.attr('data-target'),
                targetId = $touched.index(),   
                currentId = $('.current').index(),
                direction = '';
            targetId > currentId ? direction = 'down' : direction = 'up';            
            TweenLite.to(window, 0.5, {scrollTo:{y:target}, onComplete: this._adjust, onCompleteParams: [direction], ease:Power2.easeOut});
        }
_adjust(direction){
            if (direction == 'down'){
                $(window).scrollTop($(window).scrollTop()+1);
            } else {
                $(window).scrollTop($(window).scrollTop()-1);
            }            
        }