Jump to content
Search Community

Problems with scrollTo in Chrome

amort2000 test
Moderator Tag

Recommended Posts

Hi,

I'm experimenting with adding GSAP animation within a WordPress theme.

 

I've added a few buttons, all with the same class, attached click events which control the scroll to next div.

 

Things work well in Safari, Firefox and Edge, but when I view my scrollTo tweens in Chrome, easing is ignored and there's a noticeable delay before scrolling even begins.

 

There's an example at:

http://testing-place.andrewmoreton.co.uk/

when the Click Me! button is clicked is scrolls and bounces nicely in the non-Chrome browsers, but is slow and doesn't bounce in Chrome!

 

This is driving me batty! I hope someone can help!

 

thanks.

 

Pasted below is my script:

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded
  window.addEventListener("load", function() {
    // add event listners for each button with
       var all_next_section_buttons = document.querySelectorAll('.next-section-scroll');
    for (var i = 0; i < all_next_section_buttons.length; i++) {
    all_next_section_buttons.addEventListener('click', scrollToNextSection);
    }
    function scrollToNextSection() {
    var next_section = this.closest('div.section').nextElementSibling;
    gsap.to(window, {duration: 2, scrollTo:next_section, ease: "elastic"});
}
  }, false);
});

Link to comment
Share on other sites

Hey amort and welcome to the GreenSock forums!

 

The biggest issue that I see is that it looks like you forgot to apply the event listener to a specific button inside of your for loop. i.e.

// error
all_next_section_buttons.addEventListener('click', scrollToNextSection);

// correct
all_next_section_buttons[i].addEventListener('click', scrollToNextSection);

 

If I change that, it works perfectly fine in CodePen (note that I used a real <section> element, not a div with a class of section - you can't just copy and paste from the pen directly without making other changes):

See the Pen abzgvjB?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Zach,

thanks for your help, unfortunately that doesn't seem to be the problem - it looks like when I posted the code you fixed  I'd inadvertently deleted some characters, so it looked like I wasn't applying the event handler to all the buttons - however if you check the example I've put at:

http://testing-place.andrewmoreton.co.uk/

You'll see that all the buttons work, and that event handlers are attached to each.

The problem is that in Chrome, the animation has a delay before it starts, and doesn't use the easing requested.

This all works great in Firefox, Safari and Edge - what am I missing?

 

Thanks!,

Link to comment
Share on other sites

Hi Zach,

I've been looking more at this and though I'm not sure what is the problem I do know now it's to do with one of my stylesheets - so nothing to do with GSAP (or course :) )

Thanks for your help, and I'll be signing up to join Club GreenSock forthwith!

a

Link to comment
Share on other sites

Hi Zach,

I found the guilty style-rule and thought it worth mentioning on this forum.

I'd been experimenting with an experimental css property and had tried at some point scroll-behaviour:smoothbut hadn't detleted it from my stylesheet.

It really messed with scrollTo in Chrome (understandably)

 

thanks again for y our help

  • Like 4
  • Thanks 2
Link to comment
Share on other sites

  • 10 months later...
On 1/31/2020 at 11:55 AM, amort2000 said:

Hi Zach,

I found the guilty style-rule and thought it worth mentioning on this forum.

I'd been experimenting with an experimental css property and had tried at some point scroll-behaviour:smoothbut hadn't detleted it from my stylesheet.

It really messed with scrollTo in Chrome (understandably)

 

thanks again for y our help

Thanks a MILLION for this @amort2000, this issue was also driving me crazy all day from 6:00am in the morning, until finally ready your post at 9:32pm!
Legend.
BTW way for anyone who is reading this and is about to do a find in files the correct spelling is 

scroll-behavior: smooth;
  • Like 2
Link to comment
Share on other sites

  • 2 months later...
On 12/16/2020 at 10:36 PM, 7dots said:

Thanks a MILLION for this @amort2000, this issue was also driving me crazy all day from 6:00am in the morning, until finally ready your post at 9:32pm!
Legend.
BTW way for anyone who is reading this and is about to do a find in files the correct spelling is 


scroll-behavior: smooth;

saved my bacon! I recall making the same mistake YEARS ago... but had long forgotten. Found your message here and presto! back in business.

Link to comment
Share on other sites

  • 5 months later...

Just my tribute to the legend @amort2000 for saving my life (created even a new account to post this). Started to take apart my code and would have never guessed that scroll-behaviour: smooth is the devil in disguise!  

  • Like 3
Link to comment
Share on other sites

  • 5 months later...
On 1/31/2020 at 6:55 AM, amort2000 said:

Hi Zach,

I found the guilty style-rule and thought it worth mentioning on this forum.

I'd been experimenting with an experimental css property and had tried at some point scroll-behaviour:smoothbut hadn't detleted it from my stylesheet.

It really messed with scrollTo in Chrome (understandably)

 

thanks again for y our help

 

My gosh thank you! When I first found scroll-behavior: smooth, I thought it was a godsend until I realized it didn't work in Safari. Then I turned to gsap who saved the day for me (again)! That said scroll-behavior: smooth was still being applied in my CSS and probably wouldn't have realized it if not for you. Cheers!

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