Add easing to deltaY?

[RobbieC]

So i'm new to GSAP, I just started using it two weeks ago. I've spent a lot of that time reading through the forums and documents. I'm looking to add easing to my page scrolling. Kind of like what @OSUblake posted here: 

But i'm trying to apply it to the entire site, without having to have it in a fixed container with a set height. I've tried it and I didn't have any luck with what my end goal is with my project (I have way to many moving parts).  The best way to explain/show you guys what im trying to achieve is using this site as an example: https://www.reformcollective.com/ It looks like they are using tween and possibly something like scrollmagic, but I cant figure out how they were able to add the smooth page scrolling "easing". It looks like they were able to do it with out "scroll hijacking" or having a negative user experience. If you scroll their entire site, when you get to the 2nd section they have it stop scrolling Y and start scrolling X, but they are able to keep the same smooth scroll effect as your continuously scrolling with the mousewheel and all the transitions are smooth.

 

My project is very similar to their site. I'm using TimelineMax with ScrollMagic to create different animations and pins, like on this demo you guys provided and like on the above site I talked about. 

 

If I need to create a codepen I can, it will just take sometime to build. I'm creating this project for a private client so I cant breach the confidentiality agreement I have with them. 

Any help or suggestions would be greatly appreciated. I hope everyone is staying safe and healthy.

 

Thanks,

Robbie

[ZachSaucier]

Hey Robbie. Welcome to the GreenSock forums! I think this thread will help you:

 

[RobbieC]

So I built a small codepen, I'm trying to figure out why the body height is so long. If you look at the pen you will see that body background color is red, and it continues past the ending content. With chrome inspect is says the body is "height: 973px;" and if you look at the viewport div, it has the same height, yet the body continues.

But the smooth scroll effect im looking for works with Blake's scrollmagic parallax on scroll, I just used the smoothscroll part.

See the Pen f18644c16bac9ddbb2efc61eccaee8d9 by osublake (@osublake) on CodePen

.Please help. @ZachSaucier @OSUblake

See the Pen ZEGodmR by robbiecren07 (@robbiecren07) on CodePen

[ZachSaucier]

Which demo are we supposed to be looking at? And what, exactly, is your question? 

[RobbieC]

Sorry for the confusion Zach. The 2nd codepen is my example for the issue im having. The 1st codepen is the source from where I found the smooth scroll function.

 

And my question/issue is on the 2nd codepen; you will see that the body keeps going beyond the ending container.  The div.viewport has a height of 2280px, and the body style height is 2280px, yet the body is alot longer which you can see by having the body background color as red. You shouldnt be able to scroll to the red, the body should be ending at the end of the closing div.spacer

 

I hope this makes sense.

[ZachSaucier]

When making minimal demos in the future, please remove the irrelevant parts (like the loader code) so it's easier to focus on the issue being asked about.

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

 

After making your pen more minimal, I realized that GSAP isn't even relevant (since Blake's smooth scroll doesn't use it)! I also noticed that the value of the scroll is supposed to go to is half of where the actual end is being calculated. But I'll leave it up to you and @OSUblake, if he's interested, to determine why that's the case since it's unrelated to GSAP.

 

Side notes:

• Your addClass and removeClass functions seem pretty useless to me - just use elem.classList.add()/.remove().
• Why are you using jQuery's animation functions (like .fadeOut()) when you're using GSAP? GSAP performs much better. In fact, why are you using jQuery at all? You're hardly using it and you can easily replace what you have with vanilla JS equivalents.
• It looks like you're adding classes to the onDone function to transition them out. Again, why? If you're using GSAP just use GSAP for all of your animations so you get more control and keep all the animations in the same place.
• You're using an old version of GSAP 3 (3.0.1). We highly recommend the most recent version (3.2.6) which has some new features and several bug fixes.
• I hope your load function is actually based on the loading progress in your real project  Same thing with your fading in/out based on setTimeouts.

[OSUblake]

9 minutes ago, ZachSaucier said:

But I'll leave it up to you and @OSUblake, if he's interested, to determine why that's the case since it's unrelated to GSAP.

 

Not really. I locked that thread because I don't feel like answering anymore scroll related questions. At least not for free. However, that code is free for anyone to use and modify.

 

All I can say is that the problem is most likely related to the fact that you are creating the scroller when the body height is different because of your intro animations. It should be created when the page is ready for scrolling, and everything is in place.

 

And if needed, I think you can force it to reset by doing something like this.

scroller.scrollItems = [];
scroller.addItems();
scroller._update();

 

[RobbieC]

Thank you @ZachSaucier for your reply and feedback. I placed the intro into the codepen because I give the best example of my project. When I started this project my plan was to do all the animations with CSS and a little jQuery; but as the client asked for more moving parts, I decided it was best to look into learning GSAP not only for the different functions & animations but for the speed and smoothness. When I first started my project I was using CSS for animations and jQuery to control the reveal animation on scroll, but I noticed how glitchy the animations were on a older/slower computer. So i did some research and testing and found GSAP and right away I could see the improvement. 

 

So right now my project is all over the place. I have very little experience with JS but now that I can see what all GSAP can do im ready to evolve my skills and start learning GSAP. So i've been spending alot of time  in your guys learning center and reading tutorials and guides to learn GSAP. 

 

My plan is to start over and just use GSAP and maybe ScrollMagic (which I know you dislike). During that process I will have to convert my current tweens to GSAP v3 - which I will use the Mirgation guide that you guys provided.

[ZachSaucier]

Sounds like you're on the right track, Robbie  

 

Let us know if you have any specific questions!

[RobbieC]

I just want to thank you both for taking the time and replying.

 

Have a great day. Stay safe and healthy!