absolutGob

Oh yeah, I just add a gotoAndStop(0) to my parent clip and it works perfectly. Thanks for you help Carl, you rock as usual.

Thanks Carl for loonking at my problem. This is what i get as you can see in the attached file : Array(5) >0: lib.Symbole4 >1: lib.Symbole5 >2: lib.Symbole6 >3: lib.Symbole7 >4: lib.Symbole8 length: 5 >__proto__: Array(0) It's not an error. It's just like it didn't take in count the array. The other part of the code works perfectly and when i put manually all the elements it works : tl.staggerFrom([this.retex.p1, this.retex.p2, this.retex.p3, this.retex.p4, this.retex.p5], 1, {scaleX:5, scaleY:5, alpha:0, ease:Bounce.easeOut}, 0.1, "intro") But i've some parents clip with more than 25 elements and can't put them all manually (it's just letters for example). If we can't use animation and stagger on array with animate CC, i serously doubt why should i continue to use it for HTML5 canvas.

Hi guys, I 'm using Animate CC 2017 and i would like to animate one by one childs of a clip, which can be letters for example. I've tried using something like this : tl.staggerFrom(this.myClip.children, 0.6, {x:"-=50", alpha:0}, 0.03, "-=0.8"); but it doesn't works. Does someone using animate CC 2017 know if such a thing is possible ? Thanks for your help. Sorry for my english, it's not my native language.

Try with 1.1 as repeatDelay. 16 (elements) * 0.1sc (stagger) - 0.5sc (length of the tween, the repeatDelay begin at the end of the tween)

One timeline can't be visible in two different state at the same time, so you can't see the last 0.5sc while you restart it but you can loop the tweenMax in it. Try something like this : //innit TweenMax.set($productFloat, {opacity: 0}); TweenMax.set($pointer, {opacity: 0}); $beerNav.hide(); // timeline tl.addLabel ("start") .add( TweenMax.staggerFromTo($cell, 0.1, {css:{display:'none'}}, {css:{display:'block'}}, 0.1) ) .add( TweenMax.staggerFromTo($beerList, 0, {css:{fontSize :"0.8em"}}, {css:{fontSize :"0.9em"}, repeat:-1, repeatDelay:1.25}, 0.1), 0) .add( TweenMax.staggerFromTo($beerList, 0, {css:{fontSize :"1em"}}, {css:{fontSize :"0.8em"}, repeat:-1, repeatDelay:1.25}, 0.1), 0.1) .add( TweenMax.staggerFromTo($pointer, 0, {opacity:0}, {opacity:1}, 0.1), 0) .add( TweenMax.staggerFromTo($pointer, 0.5, {opacity:1}, {opacity:0, repeat:-1, repeatDelay:1.25}, 0.1), 0.1); I'm not sure about the repeatDelay, but 1.25 seems to work with my tests.

Gratz Diaco, it works exactly as I expected ! Thanks !!! I just added a timescale to decrease timeline.reverse duration. Just one thing, some polygons doesn't exactly return to the same place, i'm a little punctilious but do you have any explanation about that ? http://codepen.io/absolutGob/pen/QwYdNe

Hi, I'm working on a new interface using SVG, GSAP and JQuery. I'd like a fluid interface with smooth interactions, and without staggered effects as you can see on this codepen (when the mouse move too fast between the plygons). I'd like something like this (each area back to its place before activating the new MouseEvent) but without the memory effect wich append a new Timeline each time the mouse is over a new area. I tried a lot of things like tl : new Timeline ({onStart:removeMouseEvent, onComlpete:addMouseEvent}) but the result is never what i want exactly. Is there a way to do that ? I hope I was clear enough, my english is pretty approximate. Thanks for reading and thanks for your amazing API.

You're right. I finally created a new pen (the last seemed bugged) and forget to include it ! Thanks jonathan, it's update.

Hi Carl ! First of all, thanks for your very helpful answer. I never spent time to read codepen documentation and I should start there... Thanks for the tip. You're right about lots of symbol that come from nowhere. I didn't draw it and I think it's some kind of buttons uses for PDF or something like that. Anyway, your selecting method fix it and seems absolutely perfect for what I have to do, and I'm very grateful. So, I updated my codepen following your advice, and working with only few elements. As you already say, the result is much more reactive. It's amazing ! However, there still have a trouble when animating autoAlpha and y with Chrome but it's not a big deal for me. Thank you again and sorry for my english, I hope that the poor French as I am does not make you bleed eyes.

Yes, indeed, that's the work I do in illustrator before exporting in svg. I group each element I want to animate. It's also possible to have one element by layer and to name this layer to select him with JS. In this way, Illustrator may almost be used like the Flash interface. SVG code is very rich. It's just a first try but I think there's a lot of potential. And thanks for your tip about library with selecting capacities, i'll turn to that to avoid the "rendering bottleneck".

Hi Rodrigo ! So, thanks to you, showing me the way to select children in svg document, i could do what i want. So, here is the result : http://codepen.io/absolutGob/pen/thaDH. It doesn't seems to work with Chrome, and i don't know why (it just display elements one by one, without translation). Anyway, a great thanks to you Rodrigo and to all the GSAP community. You just open a door to infinity and beyond, for me Best, AbsolutGob

Hi Rodrigo ! Thx for your help. I think you put me on the right way with the use of svg and the selecting method in JS with parent.children. However, i would like to animate each elements with TweenMax (as you can see at the beginning of the flash animation, elements fall one by one). I try to use the var childs directly in the tweenMax, but it doesn't work of course. Any idea ?

Hi everybody, First of all, gratz for the amazing work you've done Jack, Carl and all the community's member who help the development of GreenSock. (and sorry for my bad English). i use TweenMax for 4 years in my projects AS3 in Flash and now i try to convert me to HTML5 with GSAP. I want to be able to convert all the work ive done for these 4 years in HTML5 and so ive decided to work with the more complex animation. The matter with this animation is the number of element animated (i join it to the message). I don't intend to declare all the element one by one, in CSS, this will be a wasted time I think. So, ive searched on the web but I found nothing that I can use. I work with Adode Design Premium CS5, so i can't use CreateJS as plugin for Flash and I haven't Edge Animate. I tried Swiffy but It doesn't seems to work. I tried to do something like this in Flash: function createCSS () { for (var i:int=0; i<numChildren-1; i++) { var mc:MovieClip = getChildAt(i) as MovieClip; tabMC[i] = mc; trace ('#'+mc.name+'{'); trace ('position:absolute;'); trace ('x:'+mc.x+';'); trace ('y:'+mc.y+';'); trace ('}'); trace (''); } } wich display a "potential" CSS style-sheets of all the elements but if I want it works, i will have to export each element in SVG with Illustrator with the same name used by Flash, and that also seems to be a wasted time. Is there another solution you see to do this ? I hope Ive been clear, my english is so bad. Thank you in advance for whatever help you can give me. Notice that the animation size is very low (52ko) i want to keep this size as lower as possible, even in HTML5. ps: attached file contains the .fla ATRT_anim01.zip