broflovski
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by broflovski
-
-
Hi, Rodrigo.
Thanks for the information. I should figure it out by myself.
Have a terrific day!
-
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 exceededInterestingly, 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.
Conditional verticalLoop in React
in GSAP
Posted
Alright, I've identified the reason for the error. It arose from my use of the revert method within <StrictMode>. Strangely, the revert method didn't function correctly, but switching to the kill method in the clean-up function of the useLayoutEffect hook resolved the issue.
I'm still uncertain about the fundamental differences between these two methods and how <StrictMode> operates... but the solution works. I wanted to update you on this progress and express my gratitude for your assistance in resolving the problem. Thank you.