Jump to content
GreenSock

taoistway

Trouble fixing janky scroll effect when animating on list items 'height'

Recommended Posts

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!

 

See the Pen e787a65f5202c0e1be340fa7e6ce761c by monkbysea (@monkbysea) on CodePen

Link to comment
Share on other sites

Hi there! Welcome and thanks for being part of Club GreenSock!

 

You're trying to do something a bit tangly and complex here.

ScrollTrigger pre-calculates layout and trigger positions on load so that when a certain element hits a specific point, the animation fires. It doesn't run calculations on every tick for performance reasons.

Now you're animating height. Which means every single millisecond you're changing the height of the page and the positions of the elements and triggers - this is throwing off the calculations.

As well as that you're using the elements that are being animated as the triggers (we highly recommend avoiding this) so the triggers are being thrown off both by the height changing and the position of the elements changing.

Also, animating height forces the browser to do layout calculations and reflow the page - so it's very costly from a performance standpoint (i.e. it's likely to cause jank, especially if you're animating the height of multiple elements simultaneously)

And your images are upwards of 3mb which is also going to cause the browser a bunch of stress with rendering.

Right - so onwards to solutions!

 

Use smaller images

Don't animate trigger elements on the y axis

When you can, animate transforms instead of layout

Which brings me to the final bit of advice.

Rather than try to force and wrangle the browser to work with your animation ideas, learn what the browser and the tools you're working with handle well, and then work within those constraints. Yes this will mean that some ideas aren't possible, but it'll ensure that your animations are jank free!


So this is obviously not what you're after - but just showing how simple and smooth an animation is that isn't adjusting height, isn't messing with triggers positions and isn't using big images. 🥳

See the Pen yLKwrrm by GreenSock (@GreenSock) on CodePen



 

Here's an idea that's closer to what you're after, we're animating height here, so it won't be as smooth in some browsers - but we're animating from a smaller height, to the final position, and i'm using the container as the trigger. I've locked in the container's height on page load so the child elements have something to comfortably resize into without affecting the page length, shuffling around other elements on the page or affecting the trigger positions.

See the Pen wvmObvR?editors=0010 by GreenSock (@GreenSock) on CodePen

Hope this helps!

 

  • Like 3
Link to comment
Share on other sites

@Cassie

thank you so much for such detailed breakdown of the challenge with variations of demos, and i love how you tie specifics to overall best practices regarding both planning and executing. As suspected, I knew animating height was going against the best practice, but I guess doing things the hard way also forces me to dig deeper into gsap's underlying mechanism when seeking to optimize as much as possible, and the way you break things down def clear things up a lot, for which I'm immensely grateful! Now I'm looking forward to more actions here on here :)

  • Like 2
Link to comment
Share on other sites

My pleasure! Happy to help. ☺️

Link to comment
Share on other sites

  • 2 weeks later...

Hi Cassie,

Hope you're well. I'm kind of harping back to the question I posted here based on the solution you recommended where we give height to both container and item using gsap.set() before creating the timeline animation. now with individual item having a height set with css inline, what's the best way to update the initial height on window resize because with initial height not being dynamic, the spatial relationship is messed up once the window is resized. is it something a specific greensock syntax or functionality can easily solve? onRefresh? or listening to specific event like refreshInit, etc.?

Link to comment
Share on other sites

It'd definitely be best if you could provide a minimal demo that illustrates the challenge you're facing, @taoistway but if I understand you correctly, it'd be a matter of setting invalidateOnRefresh: true on your ScrollTrigger and then using a function-based value on the "height" animation value so that it dynamically updates on any resize/refresh. 

 

Here's an example: 

See the Pen vYjYzya?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

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.
×