Search the Community

Hi All, I am building simple website in react, while opening the navigation menu, GSAP animation not working for entering and exiting the Navigation menu component. I am providing the link below for a very very rough demo, I just need functionality for now. Thanks! I am using RTG for tracking the component Enter/Exit state, https://stackblitz.com/edit/vitejs-vite-iuxsfufp?file=src%2FApp.tsx

Hi, I used to be a proficient GSAP user until 2016, as a Creative Technologist in the Creative industry, Agencies, etc. Since 2015, I've been mainly working as a full-stack developer, interface or Frontend develop; and my focus and priorities have changed completely. Much has changed since, from Popmotion to Motion, GSAP becoming free? Etc. Although I worked with GSAP and similar libraries occasionally; I'm planning to pick GSAP again, as I'd like to focus more on design + engineering for some time. GSAP seem to have a good starting point at https://gsap.com/ui, which I'll use as a reference. If any of you have any good practices and conventions when working with React + Components + Vanilla CSS or Tailwindcss, is appreciated. Thank you!

Is it possible to use gsap flip with web component slots? Here is a simple example of me trying to flip between the slots. in this example, a grid is used with img-nth atttributes. Can you do something similar with web component slots so that they can be dynamically filled with images/ videos while keeping layout and styling the same?

I have a pinned section in my page, which makes the other Scroll triggers I have in different child components have their starting positions inaccurate. I tried refreshing the Scroll trigger(using ScrollTrigger.refresh()) in the main page(file) but the issue remained. Also I want to know if there is a way I can pass down an instance of Scroll trigger and Gsap to my other components, so If i refresh that one instance, it updates everywhere, or is there a better way to handle having multiple gsap and scroll triggers in different components but still being able to control them from the main page? Also I want to know if the better approach is to write all my animations in one useEffect with all the jsx in one page(file) or have some of the animations for different parts of the page as components which include their respective jsx. So pretty much everything in one page or components style ? I ask this because the component approach has been a headache for me, because one way or another the starting points end up inaccurate. I would apperciate if someone could help with a direction I could take. This is a simplified version https://stackblitz.com/edit/vite-react-tailwind-fpc1wz?file=src/App.jsx where I tried to refresh a child component but it didn't work

Hi, I am trying to animated section with scroll created as components in React. You can find a similar effect to what I am trying to achieve here (the text on the right or the images inside the phone). In my animation I would like the headingOne to appear from the bottom of the screen and fade away towards the top of the screen, followed by the headingTow that should come from the right or left followed by the cards while the section is pined and only after the animation finished the normal scrolling would begin again. Doing this I have encountered some difficulties. One of which beaning an error that says ";" expected while using the TweenLite and I don't really see why... Also I am not use that I used gsap correctly. For the headingOne I would like to display it none, but only after the fade away animation finishes so the headingOne would come into the middle of the screen. I would greatly appreciate is you could take a look at the code pen and point out my mistakes. Thank you!