taoistway

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

@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

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!