Search the Community
Showing results for tags 'verticalslider'.
Found 5 results
-
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.
-
Hello fellow GSAP enthusiasts, I hope this post finds you all in good health and high spirits. I'm currently working on a project where I need to create a section animation using GSAP and Next.js. Despite my efforts, I haven't been able to find a suitable solution. I'm reaching out to this community in the hopes that someone can provide some guidance or point me in the right direction. To give you a clear idea of what I'm aiming to achieve, I would like to replicate the section animation showcased in this example: link to example. You can find the animation below the "About me" section on that webpage. Essentially, as the user scrolls, the image and content within the section slide vertically in a visually pleasing manner. While I initially attempted to create this animation using GSAP and Next.js, I have struggled to find the perfect implementation. I'm open to using alternative frameworks or libraries if they better suit this animation requirement. If anyone has successfully implemented a section animation like the one mentioned above, I would greatly appreciate any tips, code examples, or even a walkthrough of the steps involved. Thank you in advance for your time and assistance. I'm looking forward to your valuable input!
-
I am looking to develop a layout on GSAP in which I require horizontal scroll for few sections. I have attached layout structure diagram.
-
Hello everyone and thanks in advance for those who want to help me. I am new to the GreenSock world and am trying to reproduce a vertical slider as you can see in the CodePen example. However, I cannot understand how to make the text of the first (lorem ipsum) disappear when the second slide appears. I've tried to do this with a simple toggleClass, but it doesn't work and I don't understand where I'm fossilizing. Can you help me? Thank you
