Search the Community

Hi all, If I am using the staggerTo() property to run through a series of elements, is it possible to "start" the stagger animation again before the original stagger is complete? I've tried using the repeatDelay property, but there's still quite a gap in-between the timeline restarting. $wave.timeline = new TimelineMax({ repeat: -1, repeatDelay: -4 }); $wave.timeline .staggerTo('.Employee', 1.5, { delay: 1, opacity: 1 }, offset, 'path') .staggerTo('.Employee', 20, { bezier: { type: "soft", values: bezierCurve }, ease: Power1.easeInOut }, offset, 'path') .staggerTo('.Employee', 1.5, { opacity: 0, delay: 15 }, offset, 'path');

I'm trying to get my flicker animation to start after the opacity part of the tl tween. Problem is I can't just append it to the end, because I've got more tl tweens running while the flicker animation is happening. As you can see in the tween, it doesn't look like my function is firing at all. Any ideas? Codepen updated: http://codepen.io/kathryncrawford/pen/YyoyLz

Hi, I was wondering if cycle could handle properties like delay or the overshoot value of a Back ease for example. Or to put it the other way, what are the properties cycle can animate?

Having a blast learning gsap. Thank you for your efforts in making this plugin so awesome. I am trying to replicate the hover animation through Tweenmax but the pseudo elements are not animating. What am I doing wrong please.

I'm using staggerTo to animate a class of elements in sequence. As in: TweenMax.staggerTo(".myClass", 1, {opacity:0}, 0.2); And that works fine -- except that it always animates the elements based on their sequence in the DOM. ie: The elements that are first-defined are first to animate. Is there a parameter to reverse that sequence? I feel like there should be an easy way to accomplish this without using a timeline -- but maybe not.

this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible?

Hi, I am having a problem with staggerTo() working inside a timeline. Here is my code: var objects:Array = new Array(); function getObjects():void { objects = [object1, object2, object3]; } var timeline:TimelineLite = new TimelineLite(); timeline.call(getObjects); timeline.staggerTo(objects, 1, {scale:0}, 0); The getObjects() function, which populates the objects array, gets called before I apply staggerTo() on the objects. However, I think all of the timeline code gets parsed before any of this happens. So when staggerTo() gets parsed the objects array is actually empty, and the animation doesn't happen. Is there any way around this?

Hi, I'm trying to create a simple (generic) animation. I have a working POC but would like to know if there are any improvements that could be done that I'm not aware of (only started using greensock yesterday - awesome library!) At the moment I'm using two staggerX since I couldn't get a 'wait' period without it. Also I needed to use an onComplete handler since xxx.repeat(n).fromTo produced unexpected behaviour. Thanks

Hi, My question may sounds a little bit stupid - Is there a way to iterate throgh each item's prop with staggerTo without using too many loops? What i want to implement is somethink like this: $boxes.each(function(i, box){ var $box = jQuery(box); var animation = new TimelineLite({ paused: true }); animation.staggerTo($box, 1, {left: $box.position().left, top: $box.position().top }); this.animation = animation; }); // OR even better: var animation = new TimelineLite({ paused: true }); animation.staggerTo($boxes, 1, {left: $box.position().left, top: $box.position().top }); Any help would be greatly appreciated

Hi, I could use some assistance getting different staggers to appear in sequence. My codepen URL is: http://codepen.io/anon/pen/kaswg I have a group of blue bars that appear in sequence, starting from the bottom (from 0% to 100% opacity). Once that sequence is completed, another sequence changes the blue bars with a css class called "swap" to green bars. The last blue bar in the sequence only changes halfway (blue and green). As such, there's a separate css class for that called "swaphalf". The animation for this is working. However...there's a delay before the half bar displays. I'd like for that delay to be removed, so that I can set the half bar to appear as if it were in the same sequence of the blue to green bar swap. I thought adding ", 0.025" would start them both at the same time, but that didn't work. Placing it ahead in the chain didn't work either. I tried placing it in my load function. However, the items are present at that point, so I get undefined errors. Any help would be appreciated. Thanks. Stephen

Hi - not sure what I'm doing wrong, but I've got an AS2 script here, and I'm building a sequence of tweens. All is well until I get to staggerTo - I am positive I'm giving it an array as its first property, but it keeps throwing a type mismatch. Here are the important bits: var introTl:TimelineLite; var btnsArr:Array; function init():Void { // activate TweenLight plugins TweenPlugin.activate([AutoAlphaPlugin, ScalePlugin, TintPlugin, RemoveTintPlugin]); // store the buttons in an array btnsArr = new Array(btn0, btn1, btn2); // play intro anim introAnim(); } function introAnim():Void { introTl = new TimelineLite({onComplete:onBoardAnim}); introTl.staggerTo(btnsArr, .5, {autoAlpha:0, scale:150, ease:Back.easeOut}, "-=.3"); //icons } function onBoardAnim():Void { trace ("onboard"); } I've even stripped this out and put it into a new file - same result. I'm sure it's something simple. Any ideas?

Curious, does anyone know how to create a staggerTo() tween with a group of three.js elements. When I tween a position/scale/rotation using .to() it looks like this: TweenMax.to(element.scale, 6, { x: 0.4, y: 0.4, z: 0.4, ease: Quad.easeOut }); I've found a way to make it work, basically just loop through and create a new array. I'm really just curious if anyone has a better way. This is what I have currently: $.each(elements, function(index, elem) { staggerElements.push(elem.position); }); returnData.push( TweenMax.staggerTo(staggerElements, 12, { x: 0, y: 0, z: 1.5, ease: Quad.easeOut }, 0.1) );

I am attempting to animate opacities of several elements and experiencing some performance issues. Some preface... I'm using Snap.svg and have ported the RaphaelPlugin for Snap in my fork of GreenSock (https://github.com/anthonygreco/GreenSock-JS/blob/master/src/uncompressed/plugins/SnapPlugin.js) so generally speaking if anyone has experience with the RaphaelPlugin, any info you may have on the matter should be at least mostly relevant, though anyone with experience with GSAP may have just as valuable input. Now for the problem at hand. I have roughly 1500 different path elements on a page in which no more than 400+/- of them are animated at any one point and only animating their opacity via staggerTo shows the other simple animations choppy. The most interesting part is that the 400 or so path elements don't seem to be choppy, but the simple animation is. My first question is simple; I may have more afterward but for now.... are there any idiosyncrasies to staggerTo that I may not be aware of from a performance perspective? Eventually, I'll probably rebuild what I've done in a JSFiddle to get more specific circumstances available for assistance, but right now I'm more interested in the overall larger picture and any optimization guidelines anyone may have.

The two tweens below fade in a group of divs, but the problem is each fades in with more time between the last as it progresses (almost like it's exponentially slowing). And both tweens below fade in the first two divs at the exact same time with no stagger (hence "faking" it with the delay on the second). Any idea why? How can I get a group of divs with the same class to fade in, one by one, with the same uniform delay between the first two and the rest? Thanks in advance! /* this one doesn't work in a linear fashion */ TweenMax.staggerFromTo($("#overlayFrame"+nextFrame+ " .hotSpot"), 1.5,{opacity:0},{opacity:1},2); /* this one doesn't work in a linear fashion */ var tl = new TimelineMax() tl.add(TweenLite.to($(".courthouse"), 1, {opacity:1})); tl.add(TweenLite.to($(".hospital"), 1, {opacity:1,delay:1})); tl.add(TweenLite.to($(".jail"), 1, {opacity:1})); tl.add(TweenLite.to($(".park"), 1, {opacity:1})); tl.add(TweenLite.to($(".cafe"), 1, {opacity:1}));

http://codepen.io/robbue/pen/b4b4f3dbcaca0ae6f8a6f97bfa5ac562 invalid onCompleteAll tween value: function allComplete() { console.log('all complete'); } I want a function to run when all the tweens is finished. What am I doing wrong?

I have a grid of thumbnails (6 columns / 5 rows) that I'm animating on load and resize. On load the columns stagger from left to right into the page. On resize the rows stagger down off the page, and then the columns re-enter from left to right. The number of columns, rows, tn size and position are based on window width and aspect ratio. I'm using autoAlpha to hide/reveal column 6 and row 5. The code/conditions for the rows are working as expected. The problem I'm having is with column 6 on "resize only". 6 cols if window width >1200px 5 cols if window width <= 1200px If 6 cols enter on "load" everything works always as expected. When resizing ww <=1200px, grid exits down, then 5 cols re-enter from left (col 6 hidden). Then if you resize ww >1200px, grid exits down, then 6 cols re-enter from left. Everything works fine no matter how many times the ww is resized. If 5 cols enter on "load" there is a problem with col 6 on "resize". When resizing ww >1200px, grid exits down, then col 6 becomes immediately visible in it's end "x" position (farthest right) and the remaining 5 cols re-enter from left. Column 6 should become visible "but" positioned off the page to left, then stagger in with the other 5 cols. My thinking is the autoAlpha event is firing before being positioned, even though it is called within the positioning function. I have tried putting autoAlpha at the end of a TimelineLite timeline, used a positive position offset, etc, mostly with worse results. I have also tried staggerTo using an x start position -(ww+500). They position and size correctly but for some reason they don't enter into the page using a variable ie: "+=ww+500" but it does work with just a number within the string "+=1400". If I use the staggerTo method I can't use a fixed number if I use a variable for the starting negative offset. If I do use a fixed number that will insure that the grid clears all different window widths ie: -3000px, the entrance speed won't be consistent across different window widths. I've uploaded copies of the files (the tn images have been replaced with solid colored jpgs) http://www.peterdavidian.com/gsap/staggerFrom.html I've searched the JS forums but couldn't find a post with a solution. It's been days now (really almost a week) and I need someones help! Thank you, Peter My functions: dLoad: sizes and positions the grid container tSz: sizes the tn's tPos: sizes and positions the number of cols and rows tEnterR: staggers the cols in from left tExitD: staggers the rows down, then calls tReEnterR tReEnterR: calls tSz and tPos then staggers cols in from left

Hey folks, maybe it's that I am blind, or just an idiot, but how can I get the moment when the last element of the (staggerTo) array starts tweening? I tried getTweensOf and all kinds of workarounds, but I failed My example: TweenMax.staggerTo(stepArray, tweenSpeed, {alpha:1, scaleX:1.5, scaleY:1.5, dropShadowFilter:{blurX:15, blurY:15, distance:5, alpha:0.33}, ease:Cubic.easeInOut, onComplete:tweenScaleDown, onCompleteParams:["{self}"]}, stepStaggerAmount); Sorry if that's a dumb question, but I tried stuff for hours now and cant get it. TIA, Lasercode

I have a simple script that changes images opacity, and need to use onCompleteAll, but it seems neither it does work with TweenMax nor with TimelineLite, I checked on latest versions of FF and Chrome, win7 my code looks like this: $('img.normal').css('opacity', 0); TweenMax.staggerTo($('img.normal'), 0.3, {css:{opacity:1}, onCompleteAll:doSth},0.2); function doSth() { console.log('tweening done'); } neither this one works: var tl = new TimelineLite() tl.staggerTo($('img.normal'), 0.3, {css:{opacity:1}, onCompleteAll:doSth},0.2); onComplete works, but that's not what I need Any help please?