blumaa@gmail.com

@mvaneijgen Such good suggestions. Thank you for the pointers and feedback! I tried out the repeat on the timeline. I also added a repeatRefresh tot he tweens (I wasn't sure where you meant to put it). But honestly I'm not sure it's working to create a random stagger or speed each time the timeline starts. Here is the updated stackblitz I'm not sure what you mean by clicking the switch in instead of the sudden jump. Could you say more there? Thank you very much!

Hi all! I made a little animated Christmas tree for the holidays and I thought I would share it here. Any feedback or criticism is welcome. Thank you. best wishes during the holiday season! https://stackblitz.com/edit/animated-christmas-tree

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

I just made a neat little scene and wanted to share with the community. Any feedback would be appreciated! I wish I could embed a codesanbox in here, but no.. so here it is: (slightly NSFW) https://codesandbox.io/s/floatingwoman-tdkkz?file=/src/FloatingWoman.js:1891-1939

Oh wow. I am uses a lot of deprecated syntax. Thanks for pointing that out! Everything works now. I appreciate the help!

Sorry.. still having trouble with this. How do I import and register the DrawSVGPlugin correctly? Is this somewhere in the installation docs?

I knew you had answered it but I went back and tried it with DrawSVG and it's not working in codesandbox.. Am I doing something wrong? I put this in my codesandbox linked above in the html body: <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>

Hi everyone, how do I use drawsvgplugins in codesandbox with react? It works when I import it in my local project but I don't know how to add the dependency in codesandbox and import it. Do I use a script tag? Here's my project: https://codesandbox.io/s/x-ion-gmbh-logo-45giy?file=/public/index.html Thanks!

Abso-freaking-lutely. I cannot wait for the new scroll plugin.

I made this tutorial to show how to trigger SVG Green Sock (gsap animations) with React when scrolling. If it's not allowed here, please delete and let me know! https://medium.com/@blumaa/using-green-sock-svg-animations-with-react-and-scrolling-tutorial-68d72f48bab3 Hope it helps someone! I know I have found the gsap docs that have to do with React a bit outdated. Thanks!

Also.. still having trouble setting up MorphSVGPlugin via Codesandbox using the script tag. I think I'm doing it right but idk. Got any example for me? @OSUblake Thank you!