Jump to content
GreenSock

Jim Nayzium

ScrollTo Stutters?

Recommended Posts

My link to the codepen is actually a test html page I set up.

Sorry for the super complex code view but I can't narrow it down.

 

I am sure I am providing my own user conflicts here somehow I guess... but all I am trying to do is have the little blue menu that appears AFTER You scroll past the photo of the BOAT when it's clicked, scroll to the id on the page.

 

The javascript that controls the click action for those is located in the /dealerlogin/js/common_scripts_for_both_sides.js file... and loolks like this:

 

$('.categories_on_page').on('click', function (e) {    
    gsap.to(window, {
        duration: 1,
        scrollTo: {
            y: "#id_scroll_here_" + $(this).data("scroll-id"),
            offsetY: 220
        }
    });
});

No matter what EASE I put on the click action and. no matter how long I make it animate... it won't smoothly animate and come to rest. It just starts in super slow motion and then HURRIES to its resting spot.

I want to use a BACK EASE if possible.

 

https://phpstack-107476-2209282.cloudwaysapps.com/dealerlogin/testing/gsap_test.html

 

See the Pen gsap_test.html by dealerlogin (@dealerlogin) on CodePen

Link to comment
Share on other sites

That link seems to go to a site where a username and password are required. It'll be best if you can put it into a minimal demo anyway. It doesn't need to be your real project. Just a few colored divs to show the problem.

 

Some things to check.

Have you loaded and registered the ScrollTo plugin?

Are you using the latest version of GSAP and all plugins?

Do you have any conflicting CSS transitions?

 

If you could add a simple demo, I'm sure we can help you solve the problem.

 

Thanks.

:)

 

  • Like 1
Link to comment
Share on other sites

I tried isolating it and couldn’t recreate it. So I’m assuming the conflict is with the scrollTo being on the page maybe in more than one place. 
 

the password and username is 

 

U: vvyrhjuyvm

P:  s3mJTpJDX6

 

if you could take a look and see if something jumps out I would be forever in your debt! I thought I had in the correct folder to avoid the password from the staging environment. 
 

im fairy certain i have the plug-in registered for other uses on the page. And I don’t have any css animations that I know off honestly. 
 

I am using the flip plugin alongside the scrollTo and scroll Trigger for the top portion to animate. 
 

but it’s the blue menu buttons that appear in the animated fixed to top sticky drop down that when they are clicked it won’t work as expected. 
 

i tried isolating it for an hour to solve it and can’t recreate the issue isolated. 

 

UPDATE: on my iPhone it works decently. It’s in chrome and when I use the BACK ease that it won’t work correctly.  I think I removed the back ease from it. But you can actually use the code above and enter in console and change the ease to back and duration and see the stuttering im talking about. 

Link to comment
Share on other sites

Hi Jim, 

 

Something is adding scroll-behavior: smooth to your site, which is going to mess with the ScrollToPlugin.

 

image.png

 

  • Like 3
Link to comment
Share on other sites

giphy.gif

  • Haha 1
Link to comment
Share on other sites

I think that’s a default file that loads with bootstrap5 or with the jconfirm j query pluggin I use everywhere. Is there a way to cancel it out maybe in my override css. What should I set the behavior to to undo what it’s doing to scroll to plug-in? 

Link to comment
Share on other sites

You could set it inline:

// only set it if the browser supports it
if ("CSS" in window && CSS.supports("scroll-behavior", "smooth")) {
  gsap.set("body, html", {scrollBehavior: "auto"});
}

 

  • Like 2
Link to comment
Share on other sites

Just posting here (cuz I forgot to update it since it was such a simple fix) but just doing either of the two suggestions totally solved my issue!. Just letting anyone who finds this later know.

  • Thanks 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.
×