Smooth Scrolling (Not Anchor-Jumping!)

[fogseller 11 Likes (Newbie)]

On 7/15/2020 at 8:26 AM, GreenSock said:

Sure, @Ihatetomatoes, you can just scroll the window and that'll automatically make the ScrollTrigger-based tween update. Here's a fork: 

 

 

 

 

 

Hi guys, is it possible to resize #scroll-container height based on content inside, not to have fixed value like in codepen example (height: 300%) ? thank you

 

[Ihatetomatoes 325 Likes (Leader)]

@fogseller yes it is possible, just remove the height from the #scroll-container. 

 

You will also need to remove position: absolute from the .line element to make sure that there is some content that will stretch the #scroll-container.

[fogseller 11 Likes (Newbie)]

23 minutes ago, Ihatetomatoes said:

@fogseller yes it is possible, just remove the height from the #scroll-container. 

 

You will also need to remove position: absolute from the .line element to make sure that there is some content that will stretch the #scroll-container.

@Ihatetomatoes brilliant! thank you, works like a a charm! one more question, if you don't mind  any tip how to refresh/update on resize? when i resize now, i get either chopped image or empty space 😊  thanks

[ZachSaucier 7,152 Likes (Superhero)]

The height is set at the start, so you will need an event listener (like one for refreshInit) to set that again. The y tween also uses that value in its calculation, so you should make it a functional value instead and use invalidateOnRefresh: true on the ScrollTrigger. Something like this:

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

[fogseller 11 Likes (Newbie)]

@ZachSaucier thank you 😊 

 

[Ihatetomatoes 325 Likes (Leader)]

Thanks @ZachSaucier, this is a great solution and works fine with absolute positioned boxed with fixed size.

 

I have updated my demo where the box size and also the spacing between elements is more dynamic.

 

.box {
  width: 12.5vw;
  height: 12.5vw;
  line-height: 12.5vw;
  font-size: 10vw;
  margin-bottom: 200px
}

Everything works fine on the initial page load.

1. navigation links are scrolling to the right offset 
2. the height of the body and #scroll-container is set on page load
3. the height is correctly recalculated on window resize

See the Pen zYrJREM by ihatetomatoes (@ihatetomatoes) on CodePen

 

The challenge

• scroll to the right offset after window resize

The Issue

• for each link we are creating the initial eventListener to scroll the window to scrollTo: targetRect.top
• on page resize targetRect.top remains the same

I know we are going into the scrolljacking rabbit hole here, but I am trying to update the code to make this happen. Any insights are very welcome.

[GreenSock 18,578 Likes (Superhero)]

Here's how I'd approach it: 

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

 

I'm just populating an Array with the positional values so that whenever there's a click, it dynamically creates a tween going to that location. Then I listen for "refresh" events (which occur when there's a resize) and re-populate that Array accordingly. That allows us to avoid having to keep removing/adding event listeners. 

 

Let me know if that's clear enough. 

[fogseller 11 Likes (Newbie)]

Hey @ZachSaucier, remember i asked you few days before about combining Locomotive scroll with 

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

 ? There was a problem with pinning etc. What do you say about merging it with smooth scroll option from this thread? No Locomotive, just GSAP. ☀️  Danke

[GreenSock 18,578 Likes (Superhero)]

@fogseller I don't understand your comment/question. Can you elaborate? Are you asking us to make a change to ScrollTrigger? 

[Ihatetomatoes 325 Likes (Leader)]

@GreenSock that is a very clear approach. I was thinking about adding and removing new event listeners but that would be too expensive.

 

Having an array of positions and updating that is much better, thank you👌

[fogseller 11 Likes (Newbie)]

1 hour ago, GreenSock said:

@fogseller I don't understand your comment/question. Can you elaborate? Are you asking us to make a change to ScrollTrigger? 

Hey Jack, sorry for confusion  few days ago i asked about combining Locomotive scroll and GSAP with ScrollTo plugin

i wanted to to create Snapping sections surrounded by regular sections: 

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

 in combination with Locomotive Scroll + ScrollTrigger 

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

.

 

Locomotive Scroll was a problem in combination with ScrollTo plugin, and I was wondering is it possible to do the same thing with smooth scroll solution from this thread? Thank you

 

 

[GreenSock 18,578 Likes (Superhero)]

@fogseller You could probably do just about anything, sure.

 

If you're asking us to code it all for you, that's just not something I'm in a position to tackle. Sorry. Maybe someone else has time and is willing to do the project. I specifically designed ScrollTrigger NOT to do scroll-jacking, so I'm not inclined to burn a bunch of time trying to mimic LocomotiveScroll, though I'm confident it's entirely doable with just ScrollTrigger and the technique that @Ihatetomatoes is using. 

 

If you really need this functionality and you'd like to hire us on a consulting basis, feel free to reach out via a DM or the "contact us" form and we can try to work something out for you. 👍

[fogseller 11 Likes (Newbie)]

2 minutes ago, GreenSock said:

@fogseller You could probably do just about anything, sure.

 

If you're asking us to code it all for you, that's just not something I'm in a position to tackle. Sorry. Maybe someone else has time and is willing to do the project. I specifically designed ScrollTrigger NOT to do scroll-jacking, so I'm not inclined to burn a bunch of time trying to mimic LocomotiveScroll, though I'm confident it's entirely doable with just ScrollTrigger and the technique that @Ihatetomatoes is using. 

 

If you really need this functionality and you'd like to hire us on a consulting basis, feel free to reach out via a DM or the "contact us" form and we can try to work something out for you. 👍

Hey @GreenSock,  i think that there is some confusion about my posts. I'm just beginner trying to learn Greensock. I'm not even working on a real projects yet. it's my hobby. For now i'm trying to remake some popular websites just to learn from the real cases (this one is https://katiforner.com/) It was not my intention to offend you or anybody by any means. My apologies. From now on I will just read other people posts.  ♥️

[GreenSock 18,578 Likes (Superhero)]

@fogseller oh, I'm so sorry if I gave you the impression that I was offended. Not at all! No need to apologize. You're welcome to ask any questions around here. We really try to be warm and welcoming. The GreenSock forums are known for that. Sometimes we just need to clarify what we have the resources to do for people, that's all. With over 100,000 posts in here, it can be very expensive for us to make sure everybody gets their GSAP-specific questions answered, much less going beyond the scope and veering into general consulting projects or building things for people, that's all. 

 

I didn't mean it like "how dare you ask that..." I just meant "sorry, that's out of scope but I wish you the best of luck with it".

 

I think it's a great idea for you to learn by trying to remake popular websites. You'll be an expert in no time!

[fogseller 11 Likes (Newbie)]

@GreenSock 😊  thank you for clearing that up for me, I understand now that what I was asking is too much. ☺️  I already eliminated Locomotive scroll from the equation, and I thought this thread was perfect to ask the question about snapping sections since it only uses ScrollTrigger and ScrollTo plugin (and SmoothScroll) used in example from @Ihatetomatoes. I tried to combine it myself with 

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

  and for some reason it doesn't work. It works only when I disable SmoothScrolling. Will keep trying... looking forward to learn more cause I just ADORE GreenSock. It keeps me up all night... No time to sleep. Thank you Jack ♥️

[GreenSock 18,578 Likes (Superhero)]

Now I think I understand what you were after, @fogseller, so I crafted a CodePen that does what I think you wanted: 

 

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

 

It uses the snapping features built into ScrollTrigger. 👍

 

Is that the correct effect? 

[fogseller 11 Likes (Newbie)]

@GreenSock That's it! 👍 ♥️ 👍   English is not my native language, and that's why sometimes it's hard for me to explain technical stuff. That's why I use too much emojis, so people often think that i'm overexcited, hahaha). Thank you Jack, i appreciate it!  

[ryo-a2222 0 Likes (Newbie)]

See the Pen QWyJBXZ by derick2389 (@derick2389) on CodePen

 

Create Smooth & Something like Sticky.

↓

But, Resize the screen Height

↓

<div id="sticky"></div>  is out of position.

 

Do you have any solutions?

[GreenSock 18,578 Likes (Superhero)]

9 hours ago, ryo-a2222 said:

Create Smooth & Something like Sticky.

↓

But, Resize the screen Height

↓

<div id="sticky"></div>  is out of position.

 

Do you have any solutions?

@ryo-a2222 I was really trying to avoid this turning into a "I know ScrollTrigger was designed not to do scroll-jacking...but can you teach us how to make it do scroll-jacking?" thread

 

It looks like you're trying to mix native scroll technologies like position: sticky with a scroll-jacking scenario. That's not something we'd officially support with ScrollTrigger, sorry. It may very well be possible, but we have limited resources and I'm not in a position to burn hours trying to figure something like that out for you. Please do let us know if you find a solution, though. Also, in the future, it's best to create a new thread for new questions like this. 

[Dovisally 1 Likes (Newbie)]

On 6/8/2020 at 11:51 PM, TrulyNewbie said:

Hi, I've applied this smooth scroll to my site, but it cuts the footer off. Why might this be?

 

Thank you

 

I have also noticed the same problem if content is long enough there is a cut at the end,

I've been trying to fix it for couple of hours but not enough experience would be nice if someone can help

 

See the Pen VwaeZvp by dovisally (@dovisally) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

2 hours ago, Dovisally said:

I have also noticed the same problem if content is long enough there is a cut at the end

It seems to work fine to me. Are you sure that the pen recreates the issue for you? What OS and browser are you using?

[SunilSap 0 Likes (Newbie)]

On 6/3/2020 at 1:05 AM, ZachSaucier said:

Yep. It's because the tween that makes it look like smooth scrolling is actually moving the container around.

 

We didn't build ScrollTrigger to do scroll-jacking (which is what smooth scrolling requires), but it's entirely possible to leverage it to create similar effects. We're not prepared to offer any official recommendations in that regard yet. If there's enough demand, we may add something in the future.

Please add asap cause animation is not enough we need to create momentum  

[ZachSaucier 7,152 Likes (Superhero)]

6 hours ago, SunilSap said:

Please add asap cause animation is not enough we need to create momentum  

ScrollTrigger already supports smooth scrolling via .scrollerProxy().

[SunilSap 0 Likes (Newbie)]

35 minutes ago, ZachSaucier said:

ScrollTrigger already supports smooth scrolling via .scrollerProxy().

No i mean Gsap should another plugin or feature for smooth scroll it will clear more hassle, cause right now smooth scroll need special attention for bug free animation also third party messing up with pin and lots of secton, div position   

[ZachSaucier 7,152 Likes (Superhero)]

3 minutes ago, SunilSap said:

right now smooth scroll need special attention for bug free animation also third party messing up with pin and lots of secton, div position 

ScrollTrigger works great with third party smooth scrolling libraries that we've tried, even with pinning and lots of sections. We have no intention of creating our own smooth scrolling library.