Jump to content
Search Community

ScrollToPlugin is jumping from the beginning all the time

DYOU test
Moderator Tag

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

I have this code when content load.

And i have my .menu-content as a modal box. Position fixed, full screen with an inner scroll.

And i have a bunch of anchor links targeting to a section block inside the .menu-content

<a href='#section1'></a>
<a href='#section2'></a>
<a href='#section3'></a>
<a href='#section4'></a>

<div class='menu-content'>
   <section id='section1'>...lorem ipsum.....</section>
   <section id='section2'>...lorem ipsum.....</section>
   <section id='section3'>...lorem ipsum.....</section>
   <section id='section4'>...lorem ipsum.....</section>
</div>

 

 

I just want a click event in the link that scroll into that section. Something similar to this Codepen

 

import 'gsap/TweenLite';
import 'gsap/CSSPlugin';
import 'gsap/ScrollToPlugin';

 

 

document.addEventListener('DOMContentLoaded', () => {

let links = document.getElementsByClassName('menu-list')[0].querySelectorAll('a');

for (let link of links) {
    link.addEventListener('click', (element) => {
      element.preventDefault;
      var options = {
        scrollTo: {
          y: element.target.hash,
          autoKill: false,
          offsetY: 268
        },
        ease: Power1.easeOut
      };
      var scrollbarContainer = document.getElementsByClassName('menu-content')[0];
      TweenLite.to(scrollbarContainer, 2, options);
    });
}

}

 

 

But when i try in my project, the ScrollTo seems to jump from the Beginning (top of the screen) sometimes and then go to the target :( 
Then if i click before one ScrollTo ends, then go to the other element correctly. 

 

Thanks in advance 

See the Pen gXQLzN by HectorLeon (@HectorLeon) on CodePen

Link to comment
Share on other sites

Any reason for the autoKill? And the name of your variable "scrollbarContainer" looks kind of suspect. Are you animating the scrollbar?

 

Outside of that, your code looks fine. If something's funky, it might be related to your CSS or markup. That's about the best advice I can give without seeing it.

 

 

  • Like 3
Link to comment
Share on other sites

2 hours ago, OSUblake said:

Any reason for the autoKill? And the name of your variable "scrollbarContainer" looks kind of suspect. Are you animating the scrollbar?

 

Outside of that, your code looks fine. If something's funky, it might be related to your CSS or markup. That's about the best advice I can give without seeing it.

 

 


Hello, the autokill seems to work properly if  -> i click before one ScrollTo ends, then go to the other element correctly. 
Otherwise seems to always start from the beginning

 

And not, i'm not animating the scrollbar. I just to indicate which div hold the content and have the overflow-y: scroll
Because this is a modal box

 


So weird i updated the codepen to basically what i have in my project. But in codepen works  and in my project do this weird jump.

TweenLite.version
"1.20.2"
CSSPlugin.version
"1.20.3"
ScrollToPlugin.version
"1.9.0"

 

What kind of CSS rule could do something like that :( 
 

Link to comment
Share on other sites

Maybe scroll-behavior?

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

 

The other day somebody had it set to smooth, and it was causing issues in Firefox.

 

Just by chance, I opened an issue on Smooth Scrollbar, doing my daily ritual of informing Mac users that they're doing touch incorrectly, and I noticed you had a recent issue on there. 

 

That might explain the scrollbarContainer variable I asked about. If you are using that library, I would imagine that it might cause issues as it's not doing actual browser scrolling. It's just translating the container.

 

  • Like 1
Link to comment
Share on other sites

29 minutes ago, OSUblake said:

That might explain the scrollbarContainer variable I asked about. If you are using that library, I would imagine that it might cause issues as it's not doing actual browser scrolling. It's just translating the container.

 

 

 

 

I'm using Chrome last version anyway.


i only have the Smooth Scrollbar in the main content of the web. not in the modal -> ScrollbarContainer. But i didn't destroy the instance, just locked it when i open the modal.

 

Hmmm gonna check it right now.

Link to comment
Share on other sites

I checked the scroll-behavior and also tried without initialize Smooth Scrollbar (just in case something was messing behind scenes) but keeps calculating from the top: 0 everytime, not from the current offset :( 

 

 

 

Link to comment
Share on other sites

I'm all out of ideas. Any chance that you could try and recreate the issue in Codepen? If not, maybe post or send me a simplified version of what you're working on.

 

And as a quick sanity check, I would disable all the GSAP stuff, and see if the browser has problems scrolling to the linked hash.

  • Like 2
Link to comment
Share on other sites

6 hours ago, OSUblake said:

I'm all out of ideas. Any chance that you could try and recreate the issue in Codepen? If not, maybe post or send me a simplified version of what you're working on.

 

And as a quick sanity check, I would disable all the GSAP stuff, and see if the browser has problems scrolling to the linked hash.


Thanks for all the help, i finally recreate the issue.


But have to be a repo, just have to clone it  ( the branch lab-without-react/  no  master) and run in your terminal:
https://github.com/HectorLS/tibicenas-framework/blob/lab-without-react/


$ yarn install
$ npm run dev

 

a tab will auto-open in your browser.
Just click in the burger icon to display the modal.
 

  • Like 1
Link to comment
Share on other sites

@DYOU and @hectorleon It would be of great help if you could create a reduced CodePen that everyone can easily see.

It isn't practical to be cloning repos and such when better and more efficient options exist: CodePen, jsfiddle, plunkr, etc that allow us to view, edit and share fully working examples. 

thanks.

 

 

 

 

Link to comment
Share on other sites

  • 1 month later...

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