broflovski

I see. The demo link is same as the old one, here it is: https://stackblitz.com/edit/gsap-react-basic-f48716-cphkak?file=src%2FApp.tsx Thank you for your help.

Thank you for your prompt response and the suggestion! I was unaware that I could use matchMedia in this scenario. I've modified the code accordingly, and the link remains unchanged from before. useLayoutEffect(() => { const mm = gsap.matchMedia(); const selector = gsap.utils.selector('#container'); const firstColumnItems = selector('#column-01 > *'); const secondColumnItems = selector('#column-02 > *'); const [item] = selector('#column-01 > div:first-child'); const paddingBottom = +gsap.getProperty(item, 'marginBottom'); const wholeItems = [...secondColumnItems, ...firstColumnItems]; mm.add( { isOneColumn: '(max-width: 727px)', isTwoColumn: '(min-width: 728px)', }, (context) => { const { conditions } = context; if (conditions?.isOneColumn) { const wholeItemsLoop = verticalLoop(wholeItems, { paused: true, repeat: -1, speed: 1, paddingBottom, reversed: false, }); wholeItemsLoop.play(); return () => wholeItemsLoop.kill(); } if (conditions.isTwoColumn) { const firstColumnLoop = verticalLoop(firstColumnItems, { paused: true, repeat: -1, speed: 0.9, paddingBottom, reversed: false, }); const secondColumnLoop = verticalLoop(secondColumnItems, { paused: true, repeat: -1, speed: 1, paddingBottom, reversed: false, }); firstColumnLoop.play(); secondColumnLoop.play(); return () => { firstColumnLoop.kill(); secondColumnLoop.kill(); }; } }, root ); return () => mm.revert(); }, []); However, this resulted in the following error: Error in /turbo_modules/gsap@3.12.2/dist/gsap.js (1325:29) Maximum call stack size exceeded Interestingly, when I comment out the repeat: -1, it works as intended. However, it only runs once, which is not the behavior I'm aiming for. Do you think I might have misused the matchMedia method? Your assistance is greatly appreciated. Thank you.

Hello, I'm struggling to solve a problem with a verticalLoop animation on columns in my web layout. Any suggestions or code would be appreciated. Here's the demo: https://stackblitz.com/edit/gsap-react-basic-f48716-cphkak?file=src%2FApp.tsx I want to apply the verticalLoop animation to the columns. There are usually two columns, but sometimes it appears as one column due to window size. I've adjusted the layout using flex-wrap-reverse in tailwindCSS. The issue is that the animation doesn't work correctly after resizing the window. Specifically, I want two verticalLoop animations for each column when they are side by side, and one verticalLoop animation when they appear as a single column due to the flex-wrap CSS property. To handle this, I've created an isFlexWrapped state to conditionally run the animations. I also have a getIsFlexWrap function to detect the column layout on window resize. However, after resizing, the animation doesn't work as expected. The intended animation behavior is as follows: - When there are two columns, the first column's animation speed is 1, and the second column's animation speed is 0.9. - When there's one column, the animation speed for the entire column is 1. - During window resizing, the animation should either pause or reset to the first position (progress 0). - After resizing the window and the column layout changes (from 2 to 1 or 1 to 2 columns), the appropriate animation should run. I'm not sure what I'm missing or if I've used the verticalLoop animation or the useLayoutEffect hook incorrectly. Any hints or guidance would be greatly appreciated. Thank you for your assistance.