mickFli

Just a note of thanks to the GSAP community for helping me build this, it was a joy to work with GSAP in Angular 6, and couldn't have done it without you. http://dankemper.net

Just a note of thanks for the prompt reply and suggested resolution!

Hi GSAP Team! I'm just playing around with animating Font Awesome elements, and have found that while the CSSRulePlugin does find the rule, it does not apply the value for "content" property. Any thoughts? Thank you! -Dan

Ah, I see what you mean about pushing the span text "Delete" down due to padding. This is very helpful. x: 15 /* use x instead of padding */ Also, making the span a div (or at least act and render like a div) is a good idea, and I now understand why based on your explanation and example. Thank you! -Dan

Hi GSAP team. In testing the little delete confirmation animation in the pen (http://codepen.io/dotComb/pen/xRYoEN) ... 1. Click the "x" 2. Click on the chip, somewhere other than the delete confirmation space, to dismiss the confirmation. 3. Do 1-2 about six times. I noticed the delete text just disappears. It will always reappear if I adjust the padding. Strange behavior, and wondering if it is linked to TimelineLite.reverse. Thanks, -Dan

My son needed a way to record the data his weather station collected. This is the start of the interface I wrote for him. http://codepen.io/dotComb/pen/Gqdydw Hope this helps someone! -Dan

Yeah, I seem to also be drawing the lines incorrectly for a cubic bezier ... It's my understanding pathDataToRawBezier will return an array representing the bezier as a cubic bezier. The format of the array returned by pathDataToRawBezier; let's take the simple case where it just has one array because only one "M" command exists. Okay, so given the above, based on the discussion at this point, it is my understanding the format is this: [ anchor1X, anchor1Y, controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, anchor2X, anchor2Y, etc ... ] ... and the array both starts and ends with anchor point coordinates. So, if this is correct, then the first control point should be connected to the first anchor point, and the second control point should be connected in a line w/ the next anchor in the array, as I understand it anyway.

Okay, I finally figured out what the problem was. To clarify, what I want to do is this: rotate the first two control points in the bezier, the ones with pink circles in the pen, counterclockwise 20 degrees using their anchor as a point of origin. The point of origin is obviously important, and is initially (0,0) in the svg coordinate system. That single fact threw me off. So, I basically had to translate the points according to their position relative to the anchor, and rotate using the anchor coordinates as the point of origin. What I have now seems to work. Maybe I'm still missing something? http://codepen.io/dotComb/pen/ZbgKMW Thanks OSUblake for your help and guidance. That pen is pretty sweet, (off - topic) although I don't normally work with Babel, I like how it implements properties, and how you leveraged the line's property setter to update it's position relative to r. -Dan

Just to demonstrate how to rotate two cubic bezier control points from an existing SVG path, and then morph them, I copied the _createSVG goodness from the MorphSVG Plugin Banner Pen (http://codepen.io/GreenSock/pen/WQjRXE), and used the points of the array in the cubic bezier generated from var bezier = MorphSVGPlugin.pathDataToRawBezier(pathData)[0]; to then rotate the first two control points along my path. My rotate function is very simple, as I'm trying to get a handle on rotating control points, and hopefully this post can help someone else. function rotate(x, y, angle, bezierPathOrdinalPosition) { var _DEG2RAD = Math.PI / 180; angle = angle * _DEG2RAD; var sin = Math.sin(angle); var cos = Math.cos(angle); // Rotate by (angle) radians. // var dx = (x * cos) - (y * sin); var dy = (x * sin) + (y * cos); return { "dx": dx, "dy": dy, "pos": bezierPathOrdinalPosition }; } My question is; why are the points not rotated "upwards" and to the left, as in being rotated as if they were in the quadrant of the positive x and positive y axes of the 2d coordinate system? I don't understand the rotation being applied, vs. the math I used. Also, I'm not entirely sure which to which anchor (the black dots) these control points are related. Help me, Obi Wan. -Dan

Pffft. Can't believe it was that simple. Thanks for pointing out the difference between m and M, c and C. This statement is actually very helpful as well: Awesome!

Call it try before you by, I guess, but I'm trying to understand the dramatic difference between what `MorphSVGPlugin.pathDataToRawBezier` returns, vs. the original raw SVG path data. To produce the cape wave effect, I've noticed the "MorphSVGPlugin from GreenSock" pen applies a rotation to the points of the bezier array, originally created like this: bezier = MorphSVGPlugin.pathDataToRawBezier(e.getAttribute("d"))[0] However, my pen indicates a dramatic difference between the original points of an SVG path, and the result of calling `MorphSVGPlugin.pathDataToRawBezier`. They are obviously not the same, I'm sure for good reason, but my curiosity is getting the best of me. What is the relationship between the two? http://codepen.io/dotComb/pen/zvXjyN