blumaa@gmail.com

I have to say that this guide to react and the context/revert is EXACTLY what I was looking for. Not sure why I didn't come across it while looking at the docs yesterday. A big thanks to you!

Hey I am having trouble figuring out how to stop an infinitely repeating timeline. Here is my demo: https://codesandbox.io/s/night-day-kill-infinite-repeat-wv62sn?file=/src/styles.scss:36-37 As you can see, when it is night time, the stars flicker. This is expected. But when you click the button and it switches to day, after a few seconds, the stars come back and start flickering again. How do I kill the timeline permanently when the mode is day? Thanks for the help!

Thank you to everyone who replied! I'm sorry I didn't reply sooner, as I was on holiday. Also, I apologise for the lengthy codesandbox, this one is much shorter and more readable. And achieves the effect I wanted: https://codesandbox.io/s/sad-antonelli-hzvgy?file=/src/Moon.jsx @PointC you were totally right, grouping the masked elements causes less problems. @mikel your animation is super cool! But unfortunately doesn't include a mask/clipPath, nor React.

Hey! I've been trying to follow this amazing tutorial by the incredible @PointC but with my own svg and I'm having trouble getting it to work correctly with React. I've been googling but I can't find much on React and svgs and clipPaths/masks. Can anyone see what I'm doing wrong here? https://codesandbox.io/s/moon-stars-clippath-mask-tests-ktqdt?file=/src/MoonMask.jsx Thank you so much!

@akapowl Thank you! I'm a huge fan of @PointC and their website! It's really amazing and helpful. I've used it a lot in the past. ALso, just curious, if you don't use Illustrator, do you usually use Inkscape? If not, what do you use?

Thank you to both of you! Cassie you're totally right, I think I was over complicating things. I don't need the motionPath. The timeline I have in there because I will be adding other scenes. This was just a simplified example. akapowl, thank you for your examples! They were really helpful. Any advice on how to convert all my shapes and lines to paths? It seems every time I export my svg from Illustrator, it exports my strokes as polygons. Thanks, Aaron

Hello! I can't figure out why my dot is travelling AROUND my path here: My code sandbox example I just want the dot to go up and down on the line, and not to move horizontally at all. Can someone help explain why this is occurring? Thanks! Aaron

@rodrigo Thank you for taking the work to set it up. Works quite well! I aded an a logo animation to see if it worked and it does: https://codesandbox.io/s/react-router-with-gsap-forked-zlhcw?file=/routes/routes.js (it's just a fork of your sandbox). Anyway thanks!

@Rodrigo I'm still having this problem with React, RTG and gsap. You have an example?

Hey All! I've been improving and working on my gsap skills lately and I thought I'd show off some progress. Thanks, Aaron

Or, @Rodrigo, if you can supply a sandbox with the latest version of gsap working with the latest version of React-Transition-Group and React, that would be great! Thanks

Also, can you tell me what exactly is happening here with gsap and react? <Transition key={props.location.pathname} timeout={500} mountOnEnter={true} unmountOnExit={true} onEnter={node => { // first kill all tweens of the target gsap.killTweensOf(node); const parent = node.parentNode; const targetWidth = parent.clientWidth - parseFloat(getComputedStyle(node.parentNode).paddingLeft) * 2; // set the position and properties of the entering element gsap.set(node, { position: "fixed", x: 100, autoAlpha: 0, width: targetWidth }); // animate in the element gsap.to(node, 0.5, { autoAlpha: 1, x: 0, onComplete: completeCall, onCompleteParams: [node] }); }} // on enter end onExit={node => { // first kill all tweens of the target gsap.killTweensOf(node); const parent = node.parentNode; const targetWidth = parent.clientWidth - parseFloat(getComputedStyle(node.parentNode).paddingLeft) * 2; // set the position of the element gsap.set(node, { position: "fixed", width: targetWidth }); // animate out the element gsap.to(node, 0.5, { position: "fixed", opacity: 0, x: -100 }); }} // on exit end > What is the node and how is green sock manipulating it? Locally, when I try this, I get errors saying that Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node Is this related to React-Router-Dom? Sorry, I'm not sure I understand the process exactly. I always thought I was supposed to use useRef(example) to animate a node using example.current. But sometimes I use classes or ids to animate a path/node. Thank you for any help!

My only question with this now is- why do the svgs get resized after I view the 'ixi loader' and then go back and view a logo?

Hi to everyone, Thank you for the replies. I've read quite a bit of documentation, and, @Rodrigo, your answer was quite clarifying and helpful. I think the hardest part was updating to GSAP 3.x. After reading, learning, playing, etc., I came up with this sandbox: https://stackblitz.com/edit/react-transition-group-gsap-test?file=src/App.js Seems to work well. I just have to play with the transitions. Thank you!

Sample codesandbox: https://codesandbox.io/s/react-transition-test-o5kr6?file=/src/Logo.jsx Hello! I'm trying to set up a simple Router Switch with two buttons and two components. I want to make it so that when you press the button, it loads a new component, and includes a React-Transition-Group transition so the component slides in from y:-50. I think I set it up right after reading many posts on the forum here, but it's not working. Each component still has functional onClicks and animations, but the React-Transition-Group transitions don't work on unmount/addEndListener. Anyone know how to help or what the problem is? Is it a problem with React-Router-Dom interfering? Thanks, Aaron