Search the Community
Showing results for tags 'smooth scrolling'.
Found 6 results
-
Hi, Greetings to all with my first post ever in this mighty forum! I am trying to create a scroll effect where a list of image cards grow as they're scrolled up. The max height for each card will be the same ( determined by the image element wrapped in the container) and will be reached when the card reaches to the center of the screen. The initial height for each card on page load will be determined by their order in the document flow and the relative distance to the viewport center. Here's a mini demo I created that does an acceptable job in carrying out the desired effect, a few things that need fix: 1. the janky feel i put the demo list in the scroll smoother starter codepen and since scroll smoother uses scrolltrigger under the hood, i wonder if there's anything i need to take care to coordinate with the scrolltrigger instances i create for my animations. 2. the image flash It must be something related to refresh or update that i have messed up Besides direct fixes, I'd also hope to get some high-level clarification regarding the thinking when assessing implementation ideas for animation with gsap. My feeling is i'm not taking advantage of what it has to offer which causes repetitive work in my code when things are better off left to gsap's magic under the hood. To get there surely requires more time writing code in general, and likely a few dozens, if not more buggy demos here too. Until then, I'm hoping for some generous tips. Looking forward to any response and thank you so much in advance for your time! -
Hi all, I just wondered the best practices when using Scrolltrigger and any smooth scroll library? I appreciate you guys want isolated code examples but due to the nature of this problem being sitewide I can't really do that. I'd really appreciate a bit of insight on how to make scrolling interactions less laggy in general. All I'm really doing is using a bunch of scroll triggers, nothing complicated and under 250 lines of code so really it should not be lagging. I don't need someone to fully audit the code or anything, rather I'd appreciate if someone could just have a quick look in the inspector and see if there's anything standing out that's causing my issues. I've come up with a few things that could be causing the problem. - Image size - RAF triggering too much - Not using dynamic scroll triggers with "for each" etc Here's my site i'm using scrolltrigger x asscroll - https://scrollablegsapdemo.webflow.io/
-
Hey guys, I wonder if you could give me some advice again I am using the Locomotive smooth scroll script (https://locomotivemtl.github.io/locomotive-scroll/), which gives my projects a beautiful buttery scroll effect but I need some help with playing GSAP animations along with this when the target element comes into view. You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed. Maybe something to keep looking for changes on the elements? Any ideas? Huge thanks as always! Andy
-
Hi, Does anybody know how to disable rubber-band effect in macOS with using tweenmax smooth scrolling? I know how to disable rubber-band using a simple code, but it doesn't work with smooth scrolling. I think it happens because smooth scrolling using body/html scroll indication. Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect? The simple custom code for disable rubber-band effect: html { height: 100%; width: 100%; overflow: hidden; } body { height: 100%; padding: 0; overflow: auto; margin: 0; -webkit-overflow-scrolling: touch; } Rubber-band in macOS Chrome browser: <iframe src="https://giphy.com/embed/S6kGqZiGacx6FyJmLC" width="480" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/S6kGqZiGacx6FyJmLC">via GIPHY</a></p>
-
Can anyone help me out this. I just want sticky section with smooth scroll. https://codepen.io/farrukh1194/pen/KKNLOZY
-
In several questions about smooth scrolling, there is a link to this project on codepen (https://codepen.io/osublake/pen/QqPqbN). It is amazing and awesome and just what I had spent weeks looking for. I, however, am new to javascript and would like to be able to have more than one scroll-container on the page. It would be a scroll-container, a normal section, and then another scroll container. I imagine I need to do a loop or reset, but I don't know how to do it correctly. It would be "for each .scroll-container, do the magic." Here is the site I'm trying to do this on (http://detroitdough.flywheelstaging.com/). It would be the two sections with the "dough" in them. I have the first one working but can't figure out how to loop the second one in.
