“The best thing about GSAP is that it just works, and it works well.“I’ve long felt like GSAP is the best kept secret in JavaScript.”.It’s just one of the deepest and most reliable javascript libraries I’ve ever used” I’ve managed to learn so much from that so I’ll always be “+1 to GreenSock. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. See the Pen bGaWjpw by GreenSock ( on CodePen The ScrollSmoother Plugin on the other hand, being an official plugin, will be! It's pretty customizable, offers some handy functionality and as a bonus on top of all that it comes with some beautiful pre-built effects, that you can set up easily. So maybe that'll be an alternative for you and you'll want to consider joining the club to get the best out of your smooth-scrolling. While this helper function will probably stay around, I can't imagine it will be maintained or enhanced over time. GreenSock also just released ScrollSmoother, its very own official smooth-scrolling plugin for Shockingly Green club members and above. See the Pen RwxMjoo by akapowl ( on CodePen Your best shot will probably be to do it via CSS (as mentioned on the page linked above) best as you can. I don't think the overflow: hidden mentioned first on that page will be an option, since that helper function leverages native browser scrolling, so you couldn't just 'de-activate' it like that. See the Pen 02d8f971d453644abcac268ea19ae726 by akapowl ( on CodePen I just quickly popped it into your demo to show that the jump doesn'n't happen there. that's why I still recommend using the new smoothScroll() approach. See the Pen cbe8edf8d64af0d151f043839e8ff037 by akapowl ( on CodePen With the old approach you will notice a jump of the content though, when the refresh is called. ToggleActions : "play complete none reverse" , SMOOTHSCROLL JS CODEIf the smooth code is removed, the trigger works perfectly, i have problems only when i match the trigger and the smooth. main div that is positioned in fixed and with overflow hidden.īut, when i insert a simple trigger (which is in this case a relative positioned tag p inside the page), it places the trigger way down and while i scroll it moves too smoothly up or down. container is a relative positioned element that wraps everything and is wrapper by a. I set the yPercent as the -100% of the page and had to add also a y property to "100vh" in order to remove from the calculation the px height of the viewport that was in excess. This is the code for the page smoothing part: The effect i reached is great but in the moment in which i add triggers inside, the position of them is wrong and seems affected by the smooth effect in a wrong way. But I guess right now you’ve got the idea of the main logic behind this, so it will be quite easy to add these features in case you need them.What i'm trying to achieve is to have a smooth scroll effect applied to a. gsap.to(window, Īnd that’s it! You can even customize it to scroll horizontally or maybe support scrolling inside specific elements but for the sake of clarity we are not showing it here. If you are already using gsap in your project, then you should definitely be using the scrollToPlugin. It’s quite common to see a button that would scroll the view to a specific element after clicking on it. Harry Programmer and the philosopher’s scroll
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |