ScrollToPlugin position issues

[ad_bel]

See demo link and click on any of the links to see issue:

 

http://www.webpackbin.com/N1uIxlW8f

 

Basically I am using ScrollMagic and overriding the scrollTo with:

 

        const scrollTween = (target) => {

          

            TweenMax.to($('.base'), 0.7, {

                scrollTo: {

                    y: target

                },

                ease: Power1.easeInOut

            });

        };

 

        controller.scrollTo(scrollTween);

 

        //  Bind scroll to anchor links

        $(document).on("click", "a[href^=#]", function(e) {

 

            let id = $(this).attr("href");

 

            if ($(id).length > 0) {

 

                e.preventDefault();

              

                // trigger scroll

                controller.scrollTo(id);

 

                // if supported by the browser we can even update the URL.

                if (window.history && window.history.pushState) {

                    history.pushState("", document.title, id);

                }

            }

        });

 

 

Note: I am trying to animate a container instead of window because I need momentum scrolling in IOS so i set overflow: hidden on html/body, and overflow-y: scroll and overflow-scrolling: touch on container. This was the only way it would somewhat work. Maybe my approach is wrong?

 

css snippet (see full in link provided):

 

html, body {

    padding: 0;

    margin: 0;

    height: 100%;

    width: 100%;

    overflow: hidden;

}

 

#app {

    height: 100%;

    width: 100%;

}

 

.base {

    height: 100%;

    width: 100%;

    overflow-y: scroll;

    -webkit-overflow-scrolling: touch;

}

 

If you try the links the behave erratically. For example when you click on the first two they seem to work, third not all, 4th animates but to the wrong position. When you click the same link it animates up and down!

 

I created an issue in the ScrollMagic repo as well but I think it has to do with the ScrollToPlugin and how my css is structured. I have tried every css variation I can think and still can't get this to work.

 

Any help would be appreciated!

 

 

See the Pen by N1uIxlW8f (@N1uIxlW8f) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

I really know very little about ScrollMagic.

It seems you are passing a tween into ScrollMagic's controller.scrollTo() method

 controller.scrollTo(scrollTween);

But according to the ScrollMagic docs that doesn't seem like a valid parameter type:

 

http://scrollmagic.io/docs/ScrollMagic.Controller.html#scrollTo

 

I think you may want to pass in a function that creates the tween for you.

[PointC]

Hi ad_bel 

 

Welcome to the GreenSock forums.

 

One of our moderators (Petr Tichy) has loads of tutorials and info about ScrollMagic. Please take a look at this demo as it's almost the same thing you're creating:

 

https://ihatetomatoes.net/a-simple-parallax-template-using-scrollmagic-and-greensock/

 

Hopefully that helps a bit.

 

Happy scrolling.