ScrollSmoother scrollTo not scrolling up

[sandman 9 Likes (Newbie)]

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

[GreenSock 18,576 Likes (Superhero)]

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? 

[sandman 9 Likes (Newbie)]

Yes, this makes perfect sense.  Where are you getting the trigger array from though?  Is that created by gsap?  If so can you point me to the documentation?

** I see it now.** 

 

Thanks.

 

[GreenSock 18,576 Likes (Superhero)]

9 hours ago, sandman said:

** I see it now.** 

Great! Yeah, I was just using .map() to pull the .scrollTrigger property off each tween. There are other ways you could do this too. Let me know if you've got any other questions. 

 

Enjoy!

[sandman 9 Likes (Newbie)]

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!

[GreenSock 18,576 Likes (Superhero)]

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

[sandman 9 Likes (Newbie)]

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.  

[sandman 9 Likes (Newbie)]

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.

[Cassie 5,380 Likes (Superhero)]

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

[sandman 9 Likes (Newbie)]

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.

[sandman 9 Likes (Newbie)]

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?

[Cassie 5,380 Likes (Superhero)]

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!

[sandman 9 Likes (Newbie)]

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!

[GSAP Helper 97 Likes (Contributor)]

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. 

[sandman 9 Likes (Newbie)]

Here is an example.

 

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

 

[akapowl 5,215 Likes (Superhero)]

 

Your div doesn't have a button class but the id is button. You are targetting a class in CSS.

 

That changed, everything appears to look fine for me. Is that better for you, too?

 

See the Pen poKJgxW by akapowl (@akapowl) on CodePen

[sandman 9 Likes (Newbie)]

Oh, dumb mistake.  Yup, that makes it work. 

 

So, I'm trying to create this effect in Sveltekit.  I must be an issue with Sveltekit then. 

[sandman 9 Likes (Newbie)]

I think I see what's happening.  It looks like the wrapper that SmoothScroller creates is including the Fixed button in the wrap.  I've tried to explicitly define the wrapper but then gsap cannot find the content wrapper.  

[sandman 9 Likes (Newbie)]

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!