Jump to content

francis789 last won the day on June 17 2018

francis789 had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


francis789 last won the day on June 17 2018

francis789 had the most liked content!

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

francis789's Achievements


Newbie (1/14)



  1. Brilliant! To make it work, I imagine the bounding rectangle has to be positioned at 0,0 ?
  2. 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..
  3. 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...
  4. 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
  5. 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...
  6. 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>
  7. 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.
  8. 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:
  9. 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?
  10. Makes sense. It opens a whole new set of possibilities.
  11. 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...
  12. 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.
  13. 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.
  14. 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?