dubfonik Posted November 26, 2020 Share Posted November 26, 2020 I am animating the position of an element which I am also linking to with an anchor link. Since this element is triggered by scrolling to it and starts off the page, this results in a jumpy performance. I understand a workaround could be to create a static container which doesn't move and link to that, but that isn't ideal in my situation. I was wondering if it's possible to link to where the element would finish, instead. See the Pen RwGwjWO by joelklease (@joelklease) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 26, 2020 Share Posted November 26, 2020 Hey @dubfonik I am not quite sure, I understand, what it is you are referring too. When I view the pen and click on the link, the window instantly jumps to the bottom, the container somehow comes sliding in from the left and then the box comes sliding in from the right. It's like your html { scroll-behavior: smooth; } is doing nothing. Is this what you meant? If so, you could use GSAP's ScrollToPlugin for animating the scroll down to the bottom - which makes it buttery smooth if you wish so. See the Pen a7e1d9868b56109f3d7fdf2fc1a554dc by akapowl (@akapowl) on CodePen If that is not what you meant, please try rephrasing or re-explaining your issue. Cheers Paul 2 Link to comment Share on other sites More sharing options...
dubfonik Posted November 26, 2020 Author Share Posted November 26, 2020 4 minutes ago, akapowl said: When I view the pen and click on the link, the window instantly jumps to the bottom Sorry, not sure why it's doing that. I've just tweaked the original pen to show it more clearly (it didn't translate well in the embed). 5 minutes ago, akapowl said: GSAP's ScrollToPlugin for animating the scroll down to the bottom Ok thank you, I'll give that a go. Link to comment Share on other sites More sharing options...
akapowl Posted November 26, 2020 Share Posted November 26, 2020 13 minutes ago, dubfonik said: Sorry, not sure why it's doing that. I've just tweaked the original pen to show it more clearly (it didn't translate well in the embed). Just so you know, It still does that on my end - even when viewed in debug mode. ( I m on Windows 10 Home - Chrome 86.0.... atm ) But so do all of the demos by mozilla on this page. https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior Seems like maybe a browser bug - It's fine in Firefox. But the issue I am seeing is that it scrolls on the x-axis as well as the y-axis. So the ScrollToPlugin might be the go-to solution anyways for now, since it has none of those issues show. Edit Just updated to Chrome 87 - and there is still no working scroll-behavior: smooth 1 Link to comment Share on other sites More sharing options...
dubfonik Posted November 26, 2020 Author Share Posted November 26, 2020 4 minutes ago, akapowl said: Seems like maybe a browser bug. Interesting... it seems to work perfectly fine for me on Chrome & Firefox The issue with that ScrollToPlugin method is it clashes with the scroll-behavior: smooth property, and I want to use it across all links on the website - not just ones I tag with a class. Link to comment Share on other sites More sharing options...
Solution akapowl Posted November 26, 2020 Solution Share Posted November 26, 2020 On 11/26/2020 at 11:58 PM, dubfonik said: I want to use it across all links on the website - not just ones I tag with a class. That was just an example. You could do that, too. Check the stackoverflow links commented out in the JS for more info, if you like. See the Pen 5dc9831f2f01a25bb79a033b60799754 by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
dubfonik Posted November 27, 2020 Author Share Posted November 27, 2020 Thanks @akapowl - this worked. I would never have been able to figure that out! Thanks for your help 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now