FilipSzemraj

For everyone who will look at this topic in the future, here is the code for an ellipse carousel, which includes a function to display the inner div for the active element: https://stackblitz.com/edit/stackblitz-starters-b86qnv?file=src%2Fcomponents%2FroundComponent.js

I have figured out the solution to the first question using a simple function. Now, I will attempt to make it dynamically adaptable to a changing number of divs on the path, and to add a div displaying for the active element. Thank you very much with this help, such a small change and everything now works perfectly. This is the code for the ellipse carousel activated by clicking on some element: https://stackblitz.com/edit/stackblitz-starters-b86qnv?file=src%2Fcomponents%2FroundComponent.js

Hello, I have a couple of questions and one dead end that I can't seem to solve. I am attempting to create an ellipse carousel, essentially similar to this one made in a circle: https://codepen.io/GreenSock/pen/GRMqWvW My main issue lies in the fact that I'm attempting to move objects along the path using the progress parameter, and I don't know how to achieve this functionality. I have tried to add animation to the timeline, but currently, it isn't moving even with the basic rotation for the div, which acts as a wrapper. I've added numerous console.log statements to track progress changes, and they seem to be updating correctly. The relevant code for inspection is from line 65 to 177, with some comments interspersed. From the side problems I'm also struggling to track the active element using animation added to the timeline, similar to the example provided by GSAP example pin (lines 83-97, currently commented out). Currently, I am changing this value within the 'moveWheel' function at line 162. Here's StackBlitz link for the above questions: https://stackblitz.com/edit/stackblitz-starters-4p7twq?file=src%2Fcomponents%2FroundComponent.js Another issue I need assistance with is the 'convertToPath' function. I am attempting to obtain a path from an ellipse, but when I position the SVG beforehand (for example, by centering it using cx and cy values), obtaining the path doesn't reflect this position. Additionally, if I try to directly add a translate into the generated path, it doesn't work. How can I accomplish this correctly? I have provided separate code to visualize this problem: https://stackblitz.com/edit/stackblitz-starters-6mzrk4?file=src%2FApp.js P.S. Regarding the issue with converting the ellipse to a path, I've noticed that if I comment out line 57 within my code, it looks as it should, but now the entire path isn't visible 😕. I've saved the StackBlitz project with a comment on that line. Perhaps you could provide me as I think with some simple solution to get a whole path of svg visible? Thanks in advance.

I've updated my code and created a fork using a context approach. Initially, I thought that when using a variable passed as props, the entire component would re-render. However, now I'm a bit confused because, with the context, a simple useEffect is providing a fade-out function. I was under the impression that I might need to use forwardRef along with context, but it turns out my implementation works fine without it, suggesting my current approach could be correct. Could you, @Rodrigo, please take one more look at my revised code and let me know if there are any issues with the structure? I believe I've fixed everything, and I'd like to ensure the context approach is implemented correctly. I'm truly grateful for your assistance. Currently, I'm working on my portfolio and planning to start a blog soon. My goal is to share the knowledge I've gained with others who might find my posts helpful. In doing so, I hope to extend the reach of your help to a broader audience. stackblitz links: without context with context

Thank you very much. I must have left this error from an earlier version; if it concerns the second point, that's a similar story. Before I managed to run the fade-out animation without using a useState variable, I was attempting to hide the effect of different sizes caused by re-rendering. However, with the current understanding, it seems to be nonsensical. I think that if it works, and indeed it does, it doesn't need to be improved. However, maybe Mr. @Rodrigo has something to say about the way the button's onClick function is passed? Thank you in advance. I think I found the solution here: https://gsap.com/resources/react-advanced/

Hi everyone, I am just starting with GSAP and React and want to adopt best practices from the beginning. I would appreciate your insights on my approach. My question concerns triggering an animation before a component re-renders, similar to the discussion in this topic. However, my scenario involves initiating the animation with a button's onClick event. Currently, I am using forwardRef and useImperativeHandle in React, which allows me to activate a function from a button in a separate component. This function triggers a fade-out animation in the component where the animation is defined. In the animation's onComplete callback, I modify a variable that is part of the prop in the main component, causing it to re-render. Is there a better way to achieve this effect? Also, if you have any comments or suggestions after reviewing my code, I would be extremely grateful to hear them. Here is link to the stackblitz with the minimal demo: https://stackblitz.com/edit/stackblitz-starters-v1vstg?file=src%2Fcomponents%2Fplaceholder.js PS. I forgot mention that I want this effect to works when the buttons are in different component than the animated content. I already add this functionality to the demo.