Jump to content
Search Community

ScrollTo not working

Ron Itelman test
Moderator Tag

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

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

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

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.
×
×
  • Create New...