francis789

Brilliant! To make it work, I imagine the bounding rectangle has to be positioned at 0,0 ?

Hi @PointC Thanks for this quick response. Yes this is what I was aiming for in step 1. I said shooting stars but the actual final target is more like expanding universe with linked stars. That's why I separated out the tweens, in view of having the stars pull out one after the other. I don't see why adding in the width=0 and height=0 helps this, but whatever works! @OSUblake, what memory! But if we are using the from() function, then I guess the objects have to be located at the right end-position? And in your previous post, you were talking about the fact you can makes groups by ungrouping-regrouping in Illustrator... But in my example I didn't use groups..

I want to make a shooting-star animation with lines between the stars. I created the image in svg for the end points and set the motion using TweenMax.from() Despite starting all objects from the coordinates, they seem to come from different places...

Thanks a million, @Carl!!

I forked a pen from an the original by Nate Wiley. It works, using Tweenmax: I then changed TweenMax for a TimelineMax variable, in view of integrating into a larger project. It still works, but is much much slower

It works! I don't really see why just putting a function call inside a callback should change the way the thing runs, but I guess I can live with that. I'll try to look up a tutorial or 2 on Javascript fundamentals...

Hi @Jack, thanks for answering despite lack of context! I did as you suggested and put a button in the main GSAP-code page. It did trigger the action. The code of the button looks like this: <button id="initButton" onclick="document.getElementById('animateCC').contentWindow.init();" style="font-size:72px;position:absolute; top:0;left:0;">Animate!</button>

I don't have a codepen in this one because it involves multiple files... (I'm trying to use GreenSock to coordinate animations+audio from multiple sources.) I have an Iframe calling an html+js page that was generated using Adobe AnimateCC. <iframe id="animateCC" src="AnimateCC/hw.html" class="fullscreen"></iframe> I'm trying to call a function inside that Iframe. The playback menu from GSDevTools goes as far as the label associated with tl and then stops : var fn = document.getElementById('animateCC').contentWindow.init; tl.call(fn, [], this); document.getElementById('animateCC').contentWindow is always defined document.getElementById('animateCC').contentWindow.init is sometimes defined, sometimes undefined the call itself never works Inside the Iframe, the init() function looks like this: function init() { canvas = document.getElementById("canvas"); anim_container = document.getElementById("animation_container"); dom_overlay_container = document.getElementById("dom_overlay_container"); var comp=AdobeAn.getComposition("608A33886B013E4CA195C53BA6AACBD3"); var lib=comp.getLibrary(); handleComplete2({},comp);} Inside the Iframe I have a button: <button id="initButton" onclick="init();">Animate!</button> I can see the button. When I click it, it launches the animation.

Thank you guys for your patience and reactivity! Also the function call is more elegant tl.add(drawLineErase( pencil="#pencil", path="#squigglyPath", pencilStartPoint={x:9, y:115}, reverse=true).duration(1)); rather than tl.call(drawLineErase, [pencil="#pencil", path="#squigglyPath", pencilStartPoint={x:9, y:115}, reverse=false, duration=4], this, "-=1"); I redid the codepen:

I'm trying to integrate calls to functions into a timeline. Thanks to @Carl I got how to make a call that follows preceding tweens. (see discussion here: https://greensock.com/forums/topic/18464-multiple-timeline-event-calls-but-only-one-action ). The conclusion was that you need to pass this as a parameter, for example: var tl = new TimelineLite() tl.call(myFunction, []) tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") Now I am putting more tween calls behind a function call. I find the timeline doesn't wait for the function call to end before starting with the next call. In the codepen, the last lines of the javascript are as follows: tl.call(drawLineErase, [pencil="#pencil", path="#squigglyPath", pencilStartPoint={x:9, y:115}, reverse=true, duration=4], this, "+=2"); tl.to("#pencil",1,{y: "-=100", opacity:0}, "+=4") ; I had to add the "+=4" for the second line to follow the first one. Now that was easy, as I had a duration parameter to set the duration of the timeline inside the function. But that may not always be the case. How can I ensure that the main timeline picks up where the local timeline in the function ends? Is there some way of synchronizing the two?

Makes sense. It opens a whole new set of possibilities.

Thanks @Carl, speedy response as usual! What I was missing was the this scope parameter tl.call(myFunction, [], this, "+=1") I dutifully read and watched the links you posted and I admit I don't really understand what exact role the scope has. The explanation is 'what “this” refers to in the function' which in this case seems a bit like an infinite loop (Stack overflow!). Anyway it works now...

The cog works! great, thanks so much. Actually I was asking 2 questions in the same post. I've done a second codepen for the second question. I have a function that I call several times in the same timeline. All the calls run at the same time, instead of behaving like tweens and running one after the other. The only way I found to get them to behave like tweens was to add a fictitious tween between each call. tl2.call(animLine, ["i1", (duration = 1), (repeats = 0), (repeatDelay = 3)]); // tl2.to("#toto", 1, { x: 1000 }); // ******* fictitious timeline call tl2.call(animLine, ["i4", (duration = 1), (repeats = 0), (repeatDelay = 5)]); In the codepen below, I commented out the fictitious tweens so that you can see the problem. I don't want all the dots to appear simultaneously like soldiers; I want them to look like they are asynchronously each doing their own thing.

I believe their purpose in buying MacroMedia was to get Fireworks out of the way so they could go on selling Illustrator+Photoshop to people who do web graphics and don't need the overpriced overcomplexified features.

Hi, In the codepen I make multiple calls to rotation of the cog, but it only actually rotates once. I see the multiple rotations in the console. console.log("rotation ******") tl.to("#cog", 3, {rotation:360, transformOrigin:"50% 50%"}) (I tried variants such as adding "+=0" at the end of the call) I successfully got movements of dots in and out of the rectangle. But I had to slip in fictitious calls between two calls to the animLine function tl2.to("#toto", 1, { x: 1000 }); Does the drawSvg plugin have specific requirements as to timeline calls? Or is my understanding of timelines lacking?

What a quick answer, thanks so much @Sahil

I'm trying to create a function that would morph through a series of paths to reach destination. The codepen below tries to do that, but does not move. I did a function with just one intermediary (no group) and it works:

Thanks for pointing this out!

Thanks @OSUblake, I'll look into the stackoverflow more thoroughly. About SVGOMG what I understood was that it was a way of reducing the size of the SVG file, can it help unmuddling position problems?

Made some progress: I was using getBBox() with jQuery, not getElementById, which seems to work better I've reduced the groups causing problems to Compound paths in Illustrator. Now I have hopes that if I rewrite the code it will work...

Hi @OSUblake and @Carl I'm having some trouble with the recommendations I've been given in this page... getBBox() seems to work fine in Codepen, but in my code I get "getBBox() is not a function". My object is a path, and the same message appears in FireFox and Chrome. Ungroup and regroup in Illustrator? I've been using 2-3 levels of groups, attributing ids in Illustrator, adding in classes programmatically... Can I proceed as follows: copy id in Illustrator select items in group, ungroup group paste id to new group Or am I supposed to ungroup all groups and then recreate them all? Do I have to do the above for all group levels? Maybe the best recommendation is "stay away from SVG groups if you want to stay sane" ?

Having watched Chris Gannon's video I'd like to suggest a slightly different workflow. After some trial and error I find the easiest is to keep all the graphic editing in Illustrator, do export as an SVG file, that leave it unchanged. Then in the html page I load the svg file using ajax, with a recipe found here: http://plnkr.co/edit/LneUEK?p=preview . I did a CodePen to illustrate the method, with a "this works / this does not work" example, to show the utility of those lines of code: I've got rid of "_1" ids by attributing names to the layers in the Illustrator's layer panel. Or at least, to any object I will need to animate or manipulate later. The advantage is that you don't have to do any of the copy-pasting described by Chris. You can keep the exported SVG file in the text editor for reference. Each time you do another export the text editor asks you whether you want to load the new version, and all you have to do is click OK. The only drawback I see is that it doesn't work in CodePen. If you want to share your code, you have to do the copy-paste the SVG into the html section of Codepen. But you would typically do that once or twice, not all the time as you would when you are trying to get things to work.

Hi Carl, Awesome, you actually debugged my code! Yes, I have extra transformations that I'll have to reverse... I'll try something I've just read about: clearProps:"scale"

I'm trying to move paths created in a Illustrator to a given position. In the codePen, I move the group, then morph the balloon and move the stars. The 2 targets are positioned at 100,300 and 300,300 (in pixels) in Illustrator. I've tried a variety of techniques but none seem to work...

Got the final helloworld with simplest input.