Jump to content
GreenSock

catchnewyork

scrollto plugin not working for my use case

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hi gsappers! 

 

hoping someone can help me out. the scrollTo  plugin is having no effect on the targeted div. i am wondering if anyone knows why this is and/or what i can do to make it scroll. i need to keep it inside of a fixed container for the project that this example is to be used for. please see the attached codepen for example.

 

any insight would be much appreciated.

 

 

See the Pen gdXxWp by sias (@sias) on CodePen

Link to comment
Share on other sites

Here's a fixed/forked version:

See the Pen d28bef9f21b8d452e44a30079b146dac by GreenSock (@GreenSock) on CodePen

 

I noticed several problems with your CSS:

  1. You need to set overflow-y:scroll or overflow:scroll so that it's actually scrollable. 
  2. You have the height of that containing element as 700px, but only 5vh is actually visible. You can't scroll beyond the end of the content, so the hundreds of px that's off-screen will prevent the content from ever reaching the visible area. I set the height to 5vh just so you can see what's going on. 

Also note that you can scroll to an element selector if you'd like (that way, you don't have to guess at a specific number). And if you're loading TweenMax, there's no need to load TimelineMax separately (because it's inside TweenMax already). 

 

Does that help? 

  • Like 4
Link to comment
Share on other sites

thanks! that does help. ill post final pen that does what i am trying to accomplish...

  • Like 1
Link to comment
Share on other sites

@GreenSock Here is a link to the final codepen example.

See the Pen vzWWKR by sias (@sias) on CodePen

 

It makes more sense to view the pen in vertical mode to see how it is affected by the height of the various sections. But ultimately, I needed this to interact with scrollmagic so as you scroll, it scrolls the window to these various IDs. You nailed it with the idea of scrolling to the IDs. I didn't understand that the scrolling was in the view of the actual div that was being affected. So, thank you very much. Hopefully this will help someone else who is trying to accomplish this same trick.

  • Like 1
Link to comment
Share on other sites

Looks like I need to follow up on this..... @GreenSock

 

 

Thanks again for helping me on the codepen example. I have taken all of that code and applied it to my dev site in an attempt to pull this off on the live site. And yet, my css is still getting in the way somehow. I'm hoping I am just missing something very obvious.

The scss and html follows all of the principles of the fixed codepen in the above comment and looks like this:


<section class="home-below-animation">
            <div class="spacer"></div>
            <section id="home-products">
                THE REST OF THE HTML IS INCONSEQUENTIAL TO THIS QUESTION, I BELIEVE
            </section>
            </div>

        </section>
    
    .container.fixed {
        position: fixed;
        top: 0;
    }

    .home-below-animation {
        width:100vw;
        overflow-y:scroll;
        overflow-x:hidden;
        top:0;
        position:absolute;
        z-index:1;
        pointer-events:none;
        .spacer {
            height:100vh;
            width:5px;
            position:relative;
        }
        #home-products {
            background:white;
            position:relative;
        }
    }

    In this code, the main thing to know is that .spacer div acts as a margin-top workaround that is 100vh, guaranteeing that the .home-below-animation div starts directly at the absolute bottom of the page. The goal is to bring that div up to the top of the screen.


The tests I am running are below. The first test - - scrollDivTest is the one I am trying to get to work that is not working. It should do exactly what the code does in the codepen example. However, nothing happens. 

The second test - - scrollWindowTest is just to prove that the scrollTo plugin is in fact working as expected. And it works.

The third test - - topDivTest is to show the desired functionality, essentially using the top property of the .home-below-animation div

The fourth "test" - - topDivReset is to reset the third test.


    $scope.scrollDivTest = function() {

        TweenMax.to(".home-below-animation", .8, {scrollTo:"max"});
    }
    $scope.scrollWindowTest = function() {

        TweenMax.to(window, 10, {scrollTo:"max"});
    }
    $scope.topDivTest = function() {

        TweenMax.to(".home-below-animation", .8, {top:-700});
    }
    $scope.topDivReset = function() {

        TweenMax.to(".home-below-animation", .8, {top:0});
    }

    My followup question is... what am I missing here and why is .home-below-animation refusing to scroll?

The development environment I am working on can be see here:

http://john-guest-site-staging.herokuapp.com/en

 

The tests can be run by clicking the blue links below the navigation.

Link to comment
Share on other sites

Yeah, this is all CSS and box model stuff, unrelated to GSAP. 

 

You haven't set a height on .home-below-animation, so it'll just keep expanding vertically to fit its content. You could set height:100vh but beware that "vh" units don't factor in horizontal scrollbars. To show you what's happening, I set overflow:hidden on the <body> in the below example: 

 

See the Pen 6a931fad9313a36badc7eddb84f1a9d1 by GreenSock (@GreenSock) on CodePen

 

Also keep in mind that you cannot scroll the contents of an element past the very end. For example, if you have a 100px tall <div> that contains a 100px-tall <div> and then a 10px-tall <div> under that (totally 110px of content), you can't make that last 10px <div> scroll all the way up to the very top of its container. The browser will only allow it to scroll a total of 10px because that'll be the END of the content. See what I mean? 

 

Of course you can add a bunch of padding to the bottom of that element (or add another tall element) to stretch the content out so that whatever you're wanting to reach the top can actually reach the top, like if you set padding-bottom: 100vh. 

 

We really try to keep these forums focused on GSAP-specific questions, so feel free to post those. We just don't have the resources to devote to answering CSS and HTML questions.

 

Anyway, good luck with your project!

  • Like 2
Link to comment
Share on other sites

Hello again. For my exact situation, setting the height of  .home-below-animation to 100vh did the trick. As suggested, the area that is supposed to scroll must be smaller than the area of its contents to scroll. While this seems simple, it took a second to figure out. When the window scrolls it is only so high and the contents are larger. That appears to be what I was missing. Anyway, thanks again!

  • Like 1
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.
×