Jump to content
Search Community

Using GSAP scrollTo while a CSS transition is being applied

jamis0n test
Moderator Tag

Recommended Posts

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

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

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

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

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...