Problems with scrollTo in Chrome

[amort2000 9 Likes (Newbie)]

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

[ZachSaucier 7,152 Likes (Superhero)]

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

[amort2000 9 Likes (Newbie)]

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

[amort2000 9 Likes (Newbie)]

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

[amort2000 9 Likes (Newbie)]

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

[ZachSaucier 7,152 Likes (Superhero)]

Thanks for posting the issue! I wouldn't have thought of that for a while.

[StormCode 8 Likes (Newbie)]

I had the same problem...
See it in action here:- 
https://stackblitz.com/edit/angular-uvzo9a?file=src%2Fstyles.css

[7dots 6 Likes (Newbie)]

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;

[ashafto 0 Likes (Newbie)]

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.

[poliet 3 Likes (Newbie)]

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!  

[Cassie 5,411 Likes (Superhero)]

Thanks for creating an account to say thanks! 🥳

[BrianT 8 Likes (Newbie)]

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!