Jump to content
Search Community

ScrollSmoother scrollTo not scrolling up

sandman test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

 

I have two buttons on my second panel.  One to scroll to the first panel and the second to scroll to the third panel.  SmoothScroller is scrolling to the third panel but not back to the first panel.  I'm curious as to what is happening here and why it is not going back to the top of the first panel.

 

Thanks for the help.

See the Pen WNyNQMw by sandman18 (@sandman18) on CodePen

Link to comment
Share on other sites

  • Solution

That's because when you pass in an element like that, it defaults to a position of "top top" and you've got a lot of ambiguity in the way you set things up because you're scaling the element down, so the top of the element hits the top of the viewport in MULTIPLE places (it hits, then it goes DOWN even when scrolling up, and then eventually it stops shrinking and hits the top again). It's always convoluted when you're animating the trigger element of the ScrollTrigger itself.

 

Here's a cleaner way: 

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

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

Is there a way to control the speed of the scroll without changing the original smooth setting?  I'd like smooth:1 on the initail  but I would like the scrollTo to take a little longer on the scroll, also maybe an easing as well.

 

Thanks!

Link to comment
Share on other sites

10 hours ago, GreenSock said:

Nope. But it's super easy to customize the duration (or ease or whatever) by using a scrollTo tween with offset() as shown in the docs: 

https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

 

(don't forget to load ScrollToPlugin for that). 

And in our example it would be just adding panel.offset(), duration: 1, to the existing tween?  Or are you creating another tween here.  Sorry, the docs are a little confusing.

Link to comment
Share on other sites

Heya!

 

So something like this ->

 

// Want to customize the animation to that scroll position?
// Use the offset() method to find the correct position, and feed it to a GSAP tween like:

gsap.to(smoother, {
  scrollTop: smoother.offset('#box1', 'top 100px')),
  duration: 1
});;

 

See the Pen PoaoNPE?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

2 hours ago, Cassie said:

Heya!

 

So something like this ->

 

// Want to customize the animation to that scroll position?
// Use the offset() method to find the correct position, and feed it to a GSAP tween like:

gsap.to(smoother, {
  scrollTop: smoother.offset('#box1', 'top 100px')),
  duration: 1
});;

 

 

This works!  Thanks.

Link to comment
Share on other sites

5 hours ago, sandman said:

Great!  One last question.  When adding a fixed element to the page, it doesn't stay fixed.  Is there something happening here that I'm not aware of.  

Just following up on this one.  Does ScrollSmoother create an issue for fixed elements?

Link to comment
Share on other sites

Heya!

 

Yep - from the docs

 

Caveats

  • position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.
<body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside --->
</body>

 

Hope this helps!

Link to comment
Share on other sites

So, I've tried to place a button on the bottom of the page outside of the wrapper and also the top.  If before the wrapper it moves with the page and if after the wrapper, it won't be seen.  If I add padding to the bottom as I see the docs mention to do if an element is cut off, I can start to see the button but I would assume it would be fixed to the viewport and should be above the content.

 

Thanks!

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div>elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads allthe plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Nuxt/Gatsbyor some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Ahhh!  Okay, I need to bind:this={content} and bind:this={wrapper} to my variables respectively and explicitly define the content and wrapper in the SmoothScroller instantiation!  Sorry for the bother.  This has been a great learning process!

  • 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.
×
×
  • Create New...