SLSCoder

OK, I've read Jenkov's entire tutorial on SVG. Thanks for that. It was very informative. Now I see, an SVG element is more like an iFrame than a normal html element. In addition, a whole new set of (similar) rules apply. The coordinate systems are two separate systems. I'm still stuck. I think I can just make the SVG the entire screen width & height but what I really wanted was for the BigLogo to not be inside the SVG. The reason is simply that it flies up to the left corner of the page and shrinks at the end of the animation. It remains permanently. The 'logo parts' the arcs and the svg - disappear - if I can do that. My problem is conceptually simple. I can't find the center of the scaled svg in Javascript. Again, I realize this isn't a Greensock issue. I've hunted for information and for forums on SVG. I can't find anything. The best reference I've gotten was the one Blake gave me. If you don't know of a way to find the center of the scaled SVG I understand. You guys didn't write SVG or HTML's handling of it. Thanks much for your help either way.

Thanks Blake. I've copied pointC's code. I need to make the logo bigger without the arc but I expect that to be a small matter. Thanks for the references to the docs. I'll spend some time with them and see if I can't get a handle on SVG.

I see. I was using <img tags inside the svg. I think what I need to do is learn how to manipulate svg. I notice that CSS has no control over the elements inside the svg. I'll do some studying and play with this Codepen a bit. I'm sure now that I can make it work but I've gotta learn svg. If I *ever* get this whole animation done I'll show it to you. Thanks *again* for your help.

Could be I'm not using it right. I'll update the Codepen above to try to use it. Maybe I'll get lucky OK, I've added getBoundingClientRect(). When I change the screen size the width does change. The height does not change. So far, I can't use this animation at all. If I can't find both the width & height I can't position the paths. I have to use .png (or image format) because I'll have to do this with photographs as well. Is the only way to make an animation with a bezier path that starts on the bottom and is responsive to use vectors? Can it be done using image files at all? Thanks again for all your help.

OK, I've got a new CodePen. The .png files are inside the <svg> tag. 1. I can't move the SVG so that when the dead center (where the 2 arcs meet) is on the top left of the BigLogo.png. 2. When the SVG resizes (because CSS %) the images inside the SVG don't resize. That's OK, I resize them using % in CSS. 3. When the animation runs the size is not scaled to the new size of the Arcs and it's way off position. I'm sorry this is so difficult for me.

Actually I've got the png files inside the svg as you recommended. It didn't seem to matter in my case because I've got css set to a percentage so they'll scale anyway. I tried using getBoundingClientRect(); but it didn't return width or height correctly for any browser size. That is, sometimes it seemed to work, most of the time it was off. I googled it and found that different browsers respond differently and not accurately. I mostly test in IE because it's the most problematic. I realize this is outside the realm of greensock. I really appreciate your patience with me.

WOW! Thanks for such a quick response! I'm guessing you were referring to the codepen with the 3 circles? I was playing with it a bit. I see that I can change the size of the svg and not the viewbox. The arc & 3 circles change in size as expected and they moved along the arc as expected. This isn't really a 'greensock' question but I don't know where else to turn. I've googled it to death. Maybe you could just refer to another forum or point me in a direction if you don't want to answer it? I scale the svg by leaving the viewbox as is and setting width:16%; height:auto in css. Now the svg will scale as the browser (device) size changes. For it to be responsive I have to move the paths so that the center of the 'scaled' svg is exactly at the top, left corner of the BigLogo.png. I can get the scaled width by reading the elSvg.width.baseVal.value but when I try to read the height it doesn't change. I'm guessing it's because I set the width in css but leave the height at auto. With preserveAspectRatio, it'll do that anyway. I need it because the top of the svg needs to be LogoBig.top - svg.height/2. How can I find both the width and height of the scaled svg?

Thanks. That code is pretty elaborate. I studied it and it pretty much makes sense to me. I've gotta make this animation responsive. How can I make the path and the motion scalable in Javascript? I tried using align but to no avail. Also, where can I learn about x & y as opposed to left and top?

I tried it on the last timeline and it didn't work. Could'a been a bug I didn't catch. I tried it Blake's way. Thanks - that worked!

OK, sorry about that. Hmm, well the code *was* working :/ I've got it working pretty well on my desktop now. We'll see how it goes.

Does this only work for TweenLite or TweenMax? I'm trying to do it at the end of a sequential animation with TimelineMax and it doesn't work. t3.to(LogoSystems, 3.5, {"left":nLeft+"px", onComplete: doAnim2}); If I remove the onComplete property it works fine.

I'm sorry to keep bugging you. I'm still having problems that I can't figure out. I've updated my Codepen. The whole animation *almost* works. My problem is that both the top and bottom animations jump to the right about 10? px right at the beginning of the arc. If you run the Codepen it's more noticeable in the bottom Link animation but both of them do it. left:0 = the left edge of the div tag that is the container of the svg. I've got both offsetX set to 0 (actually no parameter set) var pathRightArc = MorphSVGPlugin.pathDataToBezier("#pathRightArc", {offsetY:-407}); And when I move to the path I move to left:0 which should be the same exact spot. If I change either of those properties it throws the end of the animation off. I'd like to use align as you suggested but I can't make it work. The images are inside the svg. var pathRightArc = MorphSVGPlugin.pathDataToBezier("#pathRightArc", {align:LogoLink}); Why is the image jumping to the right? More importantly, is there any way to get rid of that?

I think I finally get it. About the positioning of MorphSVGPlugin.pathDataToBezier MorphSVGPlugin.pathDataToBezier("#motionPath"); If no left, right, x or y parameters are set (as shown above) the target starts following the 'path' here: The SVG's left & top coords PLUS the target's left and top coords PLUS the left & top coords at the START of the path (the first pair in the path). NOTE: If the target is inside the SVG then the target's 0 coords = the SVG's top, left corner, not the screen's. If offsetX and offsetY are used, the target starts following the 'path' offsetX and offsetY AWAY from the coords described above. MorphSVGPlugin.pathDataToBezier("#motionPath", {offsetX:100, offsetY:100}); YES??? So, I've updated my Codepen and it finally WORKS! I have 1 problem left. Is there any way I can get it to not stop just before it starts following the path?

Yes, that makes sense. Thanks. So, there really is no way to set the 'position' of the path except to offset it from the position of the svg? Does a reference doc exist for the MorphSVGPlugin? Does the animation only start from the left? Can I make it start from the right on the 2nd path? I want to do that with the 2nd animation. It should come from off the right edge and then arc up. Also, once TweenMax has taken control of an element, css left and top are no longer useable for that element?

Thanks again. I'm sure this is frustrating for you but please don't leave me yet OK, I get x & y. Thanks. I still don't get offsetX & offsetY in the MorphSVGPlugin.pathDataToBezier function. What do they represent? Also, I notice that if I try to move an object after TweenMax has moved it, I can't. In the example below it doesn't move it back in the JQuery command at the end. I put one in another function and it did move it but not back to where the css indicates. Why is that? Example: var nLeftTo = nLeft + LogoSoft.width(); var tl = new TimelineMax(); tl.to(LogoSoft, 2, {x:nLeftTo, y:0}); var pathArcLeft = MorphSVGPlugin.pathDataToBezier("#pathLeftArc", {offsetX:0, offsetY:0}); tl.to(LogoSoft, 1, {bezier:{values:pathArcLeft, type:"cubic"}}, '+=1'); LogoSoft.css({"left":"-250px", "top":"205.5px"}); Also, I still don't know why tying the motion path to the svg is so important. You've mentioned it numerous times. Ideally I'd like to be able to start the path from any position on the screen I want. Or, at least from where the target (moving element) is on the screen. Can I do that?

Thanks again for working with me on this. So far I'm lost! :o) That's great news about TweenMax. I don't have to load all those other scripts! I can't make heads or tails out of the coordinate placements. I tried using x & y for the first tween. It did a dive. So, left & right did what I expected. Using x & y did not. What do x and y represent? Also, I still can't get a clue as to what offsetX and offsetY represent in the MorphSVGPlugin.pathDataToBezier function. They don't represent: 1. the coordinates on the screen; 2. the top & left coordinates of the target image or 3. the top & left coordinates of the svg file. I can't think of anything else they might represent. I've updated the Codepen to use x and y. You should be able to edit it and you certainly have my permission.

I've changed the code in my Codepen. I don't know whether I'm doing something wrong or if Codepen just doesn't work but I can't make it run. It doesn't seem to like any links that are ssl secured. ?? I've got a reference to TimelineMax.js in Settings -> Javascript but Codepen doesn't recognize it. Anyway, that code is closer to what I'm really trying to do. I thought the offsetX and offsetY set to 0 caused the movement on the path to start from where the logo was. Apparently I'm still wrong. I first thought they were the coordinates on the screen. That's wrong too. What do offsetX and offsetY represent? Notice that I create the path after the logo is where I want it to start following the path. Would that create a stop in the animation? If so, it won't work for me. How can I make the logo start following the path from right where it is at the end of the move without stopping the total animation? var tl = new TimelineMax(); tl.to(LogoSoft, 2, {left:LogoBig.css("left"), top: 205.5}); var pathArcLeft = MorphSVGPlugin.pathDataToBezier("#pathLeftArc", {offsetX:0, offsetY:0}); tl.to(LogoSoft, 2, {bezier:{values:pathArcLeft, type:"cubic"}});

Thanks for your help. Oops, LogoBig is kind of a place holder in my 'real' file. I thought I'd removed that. Sorry. Yea it's a JQuery object that's another image. In Codepen I put the references to the javascript files, including JQuery in the Settings -> Javascript area. Was that not correct? I'm not sure what you meant here " animating x and y is preferred to left and top ". The idea is to move to the start of the arc and for it to just keep going around the arc. I'll see if I can pull that off. My biggest problem here was apparently, TimelineMax, not TweenMax. I'll have read the docs and learn the difference between the 2. Thanks again for your help. When I'm done I'll show you the site.

I've got a Codepen of it but I still can't make it work. I think I've got the needed javascript files in the settings right. I can't make it recognize the MorphSVGPlugin plugin. OK, I'm trying to make a red ball: 1. move from off the left screen to a certain point. When it gets to that point I want it to 2. move along the path of an arc. The arc is made with MorphSVGPlugin.pathDataToBezier. As best I can see both are running but it looks like they're running simultaneously. How can I make them run sequentially? var pathArcLeft = MorphSVGPlugin.pathDataToBezier("#pathLeftArc", {offsetX:0, offsetY:0}); TweenMax.to("#imgRedBall", 2, {'left':LogoBig.css("left"), 'top': '205.5px'}) .to("#imgRedBall", 1, {bezier:{values:pathArcLeft, type:"cubic"}});

I think *this* was the problem. TweenMax().to . . . I put parens after TweenMax and should not have. Once I removed that the code worked fine. I simply didn't duplicate the code correctly. I thought I was creating a TweenMax object and then using it in one line. That's what happens when I can't copy & paste. I'm forced to learn the code

Thanks for the replies. Also, thanks for the links to the plugins. Now I can use codepen even with them. I'm not sure what made it work. In reality, I don't want to see the svg at all. Also, I want the ball to start at about 250 to 300 pixels below 0. I want the left to be 0. I also can't use an svg ball. What I want to move is actually a .png image which is part of a logo. To complicate it, I want to run 2 of this animation inverse to each other. Basically, the other one will be this one upside down and starting on the right. It should start I think at around left:600px and move left along an arc, upward. The 2 parts of the logo will 'hook' at the end of the animation. If I understand correctly, I should be able to do that by adding a delay:0 to the tween?? I'll play with what you've given me and see what I can do.

I tried to set up a Codepen for this but can't get it to let me set up the javascript files in the header. I can't make the ball follow the path. I've verified that MorphSVGPlugin is making the path but the tween is choking. I can't figure out why. The error I'm getting in the console is: "Unable to set property 'vars' of undefined or null reference" I paid for the use of MorphSVGPlugin but so far I can't get what I need. I've attached the file. The javascript file url for MorphSVGPlugin is relative for obvious reasons. If you test it you'll need to fix that url. index.php