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?