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?