ScrollTo not working

[Ron Itelman 8 Likes (Newbie)]

Hi - just migrated to v3, and not sure what I'm doing wrong, here's the code that works in one version, but not the other. It is the second one, the one that fails, that I want.

//works

wis.slideToTopOfViewport = function(slideNum, wrapper) {
    gsap.registerPlugin(ScrollToPlugin);
    let targetElem = wrapper.querySelector(`.slideW[data-filename="Slide${slideNum}"]`);    
    console.log(targetElem); // works

    gsap.to(targetElem, {duration:0.4, y:-200 }); //works

}

//fails

wis.slideToTopOfViewport = function(slideNum, wrapper) {
    gsap.registerPlugin(ScrollToPlugin);
    let targetElem = wrapper.querySelector(`.slideW[data-filename="Slide${slideNum}"]`);    
    console.log(targetElem); // works

gsap.to(window, {duration:0.4, scrollTo: targetElem}); //FAILS!!

}

[ZachSaucier 7,127 Likes (Superhero)]

Hey Ron. What version of GSAP 3 are you using? I know there was a minor bug in regards to certain cases of the ScrollToPlugin in an earlier version of it. 3.2.4 is the most up to date version.

 

Besides that, a minimal demo of the issue would be incredibly helpful for us figuring out what is going wrong. We'd really appreciate it!

[PointC 14,170 Likes (Superhero)]

Here's a really basic ScrollTo demo with 3.2.4 all working correctly. You can fork it for your demo if you're still having problems. Happy tweening.

 

See the Pen KKpoyrB by PointC (@PointC) on CodePen

[Ron Itelman 8 Likes (Newbie)]

I am wondering if the plugin is not activated somehow. The code is so basic. Is there a test 'ping' I can run with other plugins to verify if there's an issue? I am using the latest version, 3.2.4.

 

Thanks!

[PointC 14,170 Likes (Superhero)]

You could try 

console.log(window.ScrollToPlugin.version);

Have you made a demo of this issue for us?

[ZachSaucier 7,127 Likes (Superhero)]

If you're using modules, make sure to register the plugin:

gsap.registerPlugin(ScrollToPlugin);

 

[Ron Itelman 8 Likes (Newbie)]

@PointC Ok, the console.log is returning 3.2.4, so that is good. Haven't put the issue on CodePen yet, will do later today.

@ZachSaucier yes the plugin is registered.

Thank you both!

[PointC 14,170 Likes (Superhero)]

Just so we don't overlook the simple or obvious — you are loading your custom JavaScript after GSAP and the ScrollToPlugin, right?

[Ron Itelman 8 Likes (Newbie)]

I'm loading the scripts in this order, and the js file calling gsap is below these.

[Ron Itelman 8 Likes (Newbie)]

Interestingly, this code doesn't work, this should scroll, correct?

 

gsap.to(window, {duration:0.8, scrollTo:{y:-200}});

[GreenSock 18,234 Likes (Superhero)]

DOM elements can't scroll to a negative value I'm not quite sure what you're expecting it to do in that scenario. Are you wanting it to scroll past the minimum and maybe show blank space? 

 

Again, a reduced test case would be SUPER helpful. 

[ZachSaucier 7,127 Likes (Superhero)]

15 minutes ago, Ron Itelman said:

Interestingly, this code doesn't work, this should scroll, correct?

 

gsap.to(window, {duration:0.8, scrollTo:{y:-200}});

If you're trying to do a relative value that is valid:

gsap.to(window, {duration:0.8, scrollTo:{y:"-=200"}});

 

[Ron Itelman 8 Likes (Newbie)]

Trying a positive value does nothing as well (below).  I literally am just trying  to demonstrate that I can use gsap scrollTo on my window object. As you said putting this on codepen will help, I can put the exact same code below, would be surprised if this didn't work on codepen. Anyway, I will try to find out what is happening, and will post the codepen link soon. If there is any other simple test I can do, let me know.

gsap.to(window, {duration:0.8, scrollTo:{y:200}});

[GreenSock 18,234 Likes (Superhero)]

I wonder if maybe your page isn't long enough to actually scroll or something. I'm sure we'll be able to better diagnose once you provide a demo. Cheers!

[PointC 14,170 Likes (Superhero)]

31 minutes ago, GreenSock said:

I wonder if maybe your page isn't long enough to actually scroll or something.

 

I was just wondering the same thing. That's why I put all that sweet 'bacon ipsum' in my demo. That page needs room to run scroll.

 

[Ron Itelman 8 Likes (Newbie)]

Hello - here's the pen, and it works perfectly on CodePen, which on one hand is good, on the other, it is of course frustrating! Not sure where the conflict is in my dev environment. Anyway, thank you for the fantastic response time in trying to help! I will try to sort this out and isolate what is happening on my system and will post the solution (if I find it, sigh)

See the Pen RwPMvQv by ron-itelman (@ron-itelman) on CodePen

[Ron Itelman 8 Likes (Newbie)]

Ok good news: if I change the scrolling element to a wrapper (versus the window) it DOES work. So A - there's a solution, and B - if someone else has this problem, a solution was posted.

Works:  gsap.to(wrapper, {scrollTo:"#test", duration:1});

Fails:  gsap.to(window, {scrollTo:"#test", duration:1});

[ZachSaucier 7,127 Likes (Superhero)]

@Ron Itelman We'd really like to get any bugs that exist out of the plugin, so if you could recreate the situation in minimal form and share that project with us we'd really appreciate it! A ZIP file or GitHub repo would be great if you can't recreate it online via CodePen, CodeSandbox, or StackBlitz.

[Ron Itelman 8 Likes (Newbie)]

Thanks, it is for a work project, so hard to share code without spending a lot of time formatting, but that being said, I really love your product (and your support is fantastic too 😀) but I'd like to help. Currently I'm slammed preparing for a presentation and have two sick kiddos at home so I don't want to make a promise I won't be able to keep. Also - as the project uses GreenSock I'll probably need to inquire about commercial licenses and mapping out any issues is probably a good thing for all. I will be using more GreenSock features to illustrate data visualization and animations so you will most likely be seeing more posts as I try to get ready for the presentation

 

Cheers,

Ron