jamis0n Posted October 9, 2021 Share Posted October 9, 2021 I'm looking to replace instances of native browser scrollTo with GSAP to achieve smooth scrolling behavior. We're also very excited about the other things that GSAP can offer as well! This feels like a good start. My question is how to use scrollTo while a CSS animation is being applied that changes the total height of the viewport. I'm going to put this in a codepen for easier visualization (apologies for not having that yet) See the codepen for working example, but the basic example is a list of 3 panels, each with a fixed height of 250px, animating to a height of 100vh. In the example below, I have a CSS class that is being applied to change the panel height to 100vh with a duration of 1s. If I want to simultaneously scroll to Panel3 while that CSS transition is in progress, can I do the scrolling with GSAP such that the changing total height of the document doesn't cause a jittery/buggy scroll to Panel 3? Start - Total scroll height 750px Panel 1 - 250px Panel 2 - 250px Panel 3 - 250px End - Total scroll height 300vh Panel 1 - 100vh Panel 2 - 100vh Panel 3 - 100vh See the Pen dyzyOrE by jamis0n (@jamis0n) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted October 10, 2021 Share Posted October 10, 2021 Yeah, a CodePen demo will really help, but my guess here is that you'll just need to do the math up front to figure out where you're animating to (the scrollTo) and then it won't matter what's happening to the height of the panels. In other words, let's say that after they're done animating to 100vh you'd want the scrollTo value to be 450px - just plug that directly in at the start. Of course I'd also recommend just using GSAP for the animations if possible. It can get a tad awkward if you're doing some things in CSS and others in GSAP. It can totally work, of course, but CSS is significantly less flexible. In this example, you could use a tween to animate the height, .progress(1) that tween to grab the correct end scroll value, and then .progress(0) back again and let the tween go. It'd all look totally seamless to the user. But if you're using CSS, it's more awkward because you don't have controls like that. Another example of why it can save you time/hassle if you use GSAP from the get-go: let's say you build a bunch of animations in CSS (or other non-GSAP option) and it works fine for what you need today...but then the client says "when users click on this button, show an overlay and gradually slow down all the animations in the background, then speed them back up when the overlay gets dismissed". Doh! Now you have to rebuild everything in GSAP because CSS and other technologies can't do that. See what I mean? If you just build with GSAP in the beginning, you can have confidence that virtually anything you need to do will be possible. It changes the way you approach client requests too. Anyway, I don't mean to imply that it's always "bad" to do some animations with CSS. Not at all. And obviously I'm biased, but I'm just advocating for people to make these decisions in an informed way. Most people I chat with have never thought about a lot of these wrinkles. I live and breath animation in the browser every day, so these things are more visible in my daily life. Happy tweening! Link to comment Share on other sites More sharing options...
jamis0n Posted October 10, 2021 Author Share Posted October 10, 2021 14 hours ago, GreenSock said: Yeah, a CodePen demo will really help, but my guess here is that you'll just need to do the math up front to figure out where you're animating to (the scrollTo) and then it won't matter what's happening to the height of the panels. In other words, let's say that after they're done animating to 100vh you'd want the scrollTo value to be 450px - just plug that directly in at the start. Just added a codepen which illustrates this! In it, the toggle will simultaneously try to apply a `min-height: 100vh` w/ transition to each panel while also scrolling to the top of Panel 3 14 hours ago, GreenSock said: Of course I'd also recommend just using GSAP for the animations if possible. It can get a tad awkward if you're doing some things in CSS and others in GSAP. It can totally work, of course, but CSS is significantly less flexible. In this example, you could use a tween to animate the height, .progress(1) that tween to grab the correct end scroll value, and then .progress(0) back again and let the tween go. It'd all look totally seamless to the user. But if you're using CSS, it's more awkward because you don't have controls like that. I'd be happy to try doing this all in GSAP and agree with your recommendations for why! I think it'd make this cleaner and more scalable/extensible in the future. Can you think of a way to properly do this with GSAP only (now having seen the codepen)? The "keep the top of Panel3 pinned" while the 100vh gets applied is where I'm stuck. Thanks @jack! UPDATE: I forgot to mention the other wrinkle which is that there are other properties I am changing that cause the height to adjust, such as font-size. I've updated the codepen to include this. I believe any CSS property can be applied with GSAP though so if we find a solution for the height, it can be applied to the others as well. Link to comment Share on other sites More sharing options...
GreenSock Posted October 11, 2021 Share Posted October 11, 2021 I'm traveling and won't be able to dig into that until Tuesday most likely, so if @OSUblake or @Cassie don't chime in by then, I'll get back to you as soon as I can. I'm pretty confident it's all very doable with GSAP but I won't know for sure until I can sit down and dig into it. Please stand by... 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 11, 2021 Share Posted October 11, 2021 Hey there @jamis0n Here's a pass at a solution using Jack's suggested technique of popping the progress to the end, doing a calculation and then resetting it. I hope it helps, I'd suggest scaling the text is possible because you'll get a smoother end result than if you're animating the text size. I've added some comments too. See the Pen dyzPyXx?editors=0011 by GreenSock (@GreenSock) on CodePen 4 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