Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ron Itelman

ScrollTo not working

Recommended Posts

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!!

}

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

You could try 

console.log(window.ScrollToPlugin.version);

Have you made a demo of this issue for us?

  • Like 2
Link to comment
Share on other sites

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

gsap.registerPlugin(ScrollToPlugin);

 

  • Like 1
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

1239059645_ScreenShot2020-03-13at12_52_18PM.png.7443f19035d303410f10aadc9cde7d84.png

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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"}});

 

  • Like 2
Link to comment
Share on other sites

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}});

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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. :)

 

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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});

Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×