OSUblake

Wow! Don't know how I didn't see that, but congrats!

Hi @francis789 There's no absolute or relative positioning in SVG. That's for HTML. Everything starts at the 0,0 coordinate of the parent SVG's canvas. You should remove transforms from anything you want to animate as it might cause problems with scaling and rotation. You can remove transforms by ungrouping stuff in Illustrator. Once the transforms are removed, you can group your stuff back if you want. <path id="star1" d="M87.07,76..." transform="translate(-26.98 -46.26)"/> And read the post that Carl linked to. Magic!!!

Oh, I wouldn't be surprised either. I was making a generalization about the focus on CSS/WAAPI animations as it's a way to reach a larger audience. They do mention GSAP at the end when they were talking about how the animation isn't dynamic, so the user would always have 7 emails. "It's a feature, not a bug." https://www.twitch.tv/videos/247102814?t=01h52m32s

Hi @James Neufeld You can change the source of an image.

Hi, @mikel, long time no see! rough.js looks like a pretty cool library. Thanks for sharing! And if you're looking for a hosted library, I would recommend checking out jsDelivr. You're not going to find a lot of libraries on cdnjs. https://www.jsdelivr.com/package/npm/roughjs That started out as a joke to your handwriting tutorial. Calculating a shaky/rough look is pretty hard on the CPU, so I created 5 different frames ahead of time, and then cycle through them. It's the same thing @Carl is doing in his video, but he's only using 2 frames. The generator article that @shihn posted shows how you can reuse shapes. That might be a better approach than creating a new set of shapes on every draw call.

It's almost exactly like the ModifiersPlugin one I did, except using a Bezier like that will result in a lot more calculations. It's still a really nice animation though. I just looked at your pens and noticed you had something with The Nature of Code. Really cool book. I was just telling somebody about that. Daniel Shiffman has a lot of great videos coding up stuff from it. And here's the secret to getting mouse coordinates inside an SVG. Everything changes once you have a viewBox on it, which messes everybody up.

Oh, I like that. Did you hear about this stream on Twitch? https://twitter.com/keyframers They are always are hanging out in the Slack that @Carl recommend joining... so stop slacking and join. But after seeing the steam, I figured out why they call themselves "The Keyframers". They are going to focus mostly on CSS/WAAPI keyframe animations. We need to move our show over to Twitch, and call it "The Timeliners". We'll battle back and forth between the simple and the complicated, SVG and canvas, jQuery and Angular, etc. And of course, we'll be sponsored by GSAP.

@alahmadiq8 Oh wait, one more example using the ModifiersPlugin.

From Sine eases to Cubic Beziers, this thread has you covered. @PointC solution is good too!

Here's the fork with the flexbox.

Hehe. Welcome to crazy world of DOM coordinates. Look at the different values reported by getBoundingClientRect and offsetLeft/Top/Width/Height. getBoundingClientRect takes transforms into account, which is what's throwing off your positioning. card { transform: translate(-50%,-50%); } And there's no easy way to read that transform value from a CSS file because the browser will convert it into a matrix. An easy way to center the card would be with flexbox. Actually, CSS Grid Layout has really good support now. https://caniuse.com/#search=grid That might be a better an option than using semantic-ui for a grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Here's a simplified example of FLIP without React. It's really like an optical illusion. When the DOM changes, the elements will actually be in their end position/state, but the inverted animation makes it appear like it's transitioning to its new position/state.

What type of game are you making? I can't comment too much on the React part, but that article looks like a good approach. Oh yeah! That's where a FLIP animation really shines. Click away at this demo. An important thing to remember is that there shouldn't be any inline styling that deals with position or size on your elements. Before calling getBoundingClientRect in that demo, I set the transform on each element to "none", otherwise the bounds might be incorrect. Later on, I add any transforms that were on the element into the invert calculations. A nice thing about GSAP is that the transform values are cached on the element. For example, to get the x and y translation value, you can do this. var x = element._gsTransform.x; var y = element._gsTransform.y;

If it's in your node_modules folder, you should be able to do this. import "gsap/MorphSVGPlugin";

Put that on Twitter. I'd be curious to see if and how they would respond to that.

Hehe. I did say I wasn't a React expert, so I'm not sure about the best way to do the reconciliation/DOM manipulation. What I was describing is something I've done with games using vanilla JavaScript. I guess it would be similar to using redux or mobx.

I hate filing bugs. I usually just cross my fingers and hope @Jonathan did it already.

An example of FLIP in React. It uses CSS transitions, but it shows that it is possible. http://joshwcomeau.github.io/react-flip-move/examples/#/square

Those are really good questions. For a DOM/React based game, the reconcillation of the div-piece might be a good option. You could do a FLIP animation. https://aerotwist.com/blog/flip-your-animations/ Check out this demo using Vue. It's not a real game, but it uses the FLIP technique. https://jsfiddle.net/chrisvfritz/sLrhk1bc/ So lets say the cells are 100 x 100, and you want to move a piece from cell 0,0 to cell 1,1. You might want to animate it directly like... TweenLite.to(element, 1, { x: 100, y: 100, onComplete: function() { // reconcilliate??? } }) With the FLIP technique, you would change the DOM first, the reconcillation part, and then animate it from where it was to its new position. TweenLite.fromTo(element, 1, { x: -100, y: -100 }, { x: 0, y: 0 });

Join the Slack - Animation at Work and you can see where the question came from. It was posted in the #gsap channel. http://damp-lake-50659.herokuapp.com/ But I don't think the repeat was really part of the question. That's just what the demo had in place when Jack forked it. I think what people are trying to do is more of lightbox effect. Click on small image, and make it fill a larger area.

Asking a question like that on StackOverflow probably won't get you very far as it might be considered too broad or opinionated. I don't mess with React that much, so I can't help you out with that part, but searching this forum for React related questions is probably the best place to start. Look for posts by @Rodrigo as he the resident React expert around here. https://greensock.com/forums/profile/9252-rodrigo/ Just wondering if you did the tic-tac-toe tutorial? https://reactjs.org/tutorial/tutorial.html I would probably start with that, and add animations to it to get an idea of how to structure stuff.

I think that is an Edge bug. I'm getting incorrect values here. console.log(text.textLength.baseVal.value) console.log(text.textLength.baseVal.valueInSpecifiedUnits) console.log(text.getAttribute("textLength")) Might want to report it.

It's a hard choice. I know people are going to start asking for this functionality more. I think there are better ways of animating this, like using an image and scale, but I know a lot of people will still want to do it with backgroundSize. The CSSPlugin is already pretty big, and trying to match every CSS feature, while probably technically possible for the most part, would just make the plugin even bigger. Maybe this would be better off as a utility. This is a very common problem for canvas developers too. I can't tell you how many helpers libraries I see like this. https://github.com/kittykatattack/scaleToWindow The math is still the same.

You probably have enough quick tips to write your own book.

Hi @GabeM Yeah, I forgot to mention that I did not test that code at all, so I don't know how it looks. But if you need more help help, try making a little demo.