Search the Community

Showing results for tags 'staggerto'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 38 results

  1. Basically what the title says....I'm not attaching a CodePen as it's more or less an API question I think... I've got a collection of `divs`in a circle shape. I collect these in an array and then TweenMax.staggerTo on all of them with yoyo:1 and repeat:1 so that they quickly tween back to how they were when they started. But I'd like the last one to remain in the tweened state, that is "yoyo" all of the elements except the last. What's the simplest way to do this? (If there is a way). TweenMax.staggerTo(myArrayOfDivs, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true, }, .05).length; } // how to keep myArrayOfDivs[length-1] tweened? I thought of doing a staggerTo on all but the last element of the array (i.e., create a new array with all but the last element), setting a onCompleteAll on the staggerTo and then tweening the last element separately, but that didn't work, as I don't want it to start when all of the rest have tweened and yoyo'd, but for all to flow seamlessly as if it were one tween. Any suggestions welcome!
  2. Is it possible to change the duration in a smart way on the last two elements in a timeline using staggerTo ? I want the last two green elements to go in a little bit slower than the purple ones. There could be 20 purple elements so I don't know the number of objects but I would like the last two to always go slower.
  3. ryanpwaldon

    Safari bug: _next & _prev

    Hi guys, I'm running into an issue on Safari with a function I've created that uses the _next, and _prev properties on a tween object. Here's the code: const copy = new SplitText('.copy-' + i, {type:'chars, words', charsClass:'chars'}) tl.staggerTo(copy.chars, staggerDuration, {onStart: caretForward, onStartParams: ['{self}']}, staggerDuration, label) function caretForward(tween) { if (tween._prev) { TweenMax.set(, { borderRight: 'none' }) // this removes the caret for the previous character // tween._prev is always null when called in Safari } TweenMax.set(, { autoAlpha: 1, borderRight: borderStyle }) // this adds the caret for the current character if (tween._next === null) { // tween._next is also always null when called in Safari blink( } } I'm creating a typewriter effect whereby the caret is created (by adding a borderRight to the character) in the onStart callback, and subsequently removed using the _prev property in the following tween. This works in every browser (including IE), however the _prev property seems to be always 'null' in Safari. Does anyone have any ideas on what could be causing this? Any help would be greatly appreciated! Thanks, Ryan
  4. Acccent

    TweenMax.staggerTo and pause

    Hi everyone, this isn't a question, just an observation! I was using TweenMax.staggerTo recently and was wondering why my tween was playing if I didn't pass paused: true, but if I did and then tried to use .play() I would get an error saying something like is not a function. Turns out staggerTo creates an array of tweens, and arrays do indeed lack a .play() function. So if you plan on controlling the playback of a single staggerTo tween, you still should put it into a timeline Maybe this ought to be mentioned in the docs? Caused me quite the headache

    Using staggerTo / staggerFrom with "this"

    Hi all, This is something that I've been wondering about, but haven't worked out the best solution for. What I'm trying to do is animate an array of elements on the x axis by the width of each element. For example: element1 = 20px element2 = 40px Using staggerTo / staggerFrom, I'm looking to animate element1 by 20px and element 2 by 40px. I've attached a codepen to what I was hoping would work. Is it possible to do these kinds of animations using the "this" keyword?
  6. kpendic

    Stagger letter effects

    hey I've built animation only with gsap + lettering.js, instead I have a feeling that I needed to buy License for GreenSock club,, I'm sending this so you can check if I'm not stepping outside of legal bounds with this (I've basically replaced splittext => lettering.js)
  7. swampthang

    staggerTo Reconstruct

    The animation in the Codepen ends using a staggerTo animation. Some info regarding the codepen: It uses the data object to store each tween's settings. There are 2 ways of running the animation: Directly and from the stored data (see above) The initial animation (what I'm calling the direct animation) runs when the page loads and if you click the REPLAY button. Each time it rebuilds using some random settings so runs a little different each time. When you click the PLAY FROM DATA button, I run a function that I'm using in my local app called getGsapData to snag all the data from the timeline and then pass that data to an animateFromData function to exactly replicate what was created randomly. (I have to be able to store the data in a file locally so can't just store the timeline itself. ) THE ISSUE is that when the direct animation runs, the ending staggerTo animation seems to animate each of the items out all at once. But, when you run the animation from the storedData, it seems to animate off the way it's meant to work - staggered. I've been trying to figure out what's different between the 2 for two solid days. Can any of you guys (most of whom are much smarter than me) possibly figure out what the deal is? I can change the staggerTo params in the initial animation and it doesn't seem to change the way the animation runs on REPLAY. The animation data gets sent to a textarea and prints as a pretty json string for perusal. So sorry for the complexity of the codepen but for what I'm attempting to do, I didn't see much I could do to both replicate the issue and simplify the example. I actually did remove quite a bit of stuff.
  8. gareth

    on compete of staggerTo

    I have a text animation that shows one word at a time. Is there a way I can fire a function at the end of each staggerTo (i.e each paragraph?) This is what I have: tl.staggerTo(mySplitText.words, speed, {display:'block',repeat:1,yoyo:true}, speed*2,endOf) function endOf() { console.log ('end of paragraph') }
  9. Robert Wildling

    staggerTo on pseudo element?

    Hi, dear GSAP-community, I would like to animate an :after element width "staggerTo" and did read up on the "CSSPluginRule". What is unclear to me: - Is this plugin already included in TweenMax or not? If not, is is there any way to download it separately? (I only fund the configuration download, which include TweenLite...) - Is it even possible to use a "staggerTo" anim on pseudo elements? I prepared a pen, but that one does not work... Any tips would be greatly appreciated - thank you!
  10. kvnmcwebn

    simple staggerTo and cycle in timeline

    Hi, I'm trying to stagger in a series of boxes with opacity. Maybe the cycle feature is an overkill for this but I'd like to learn how to use it. All of the tutorials I've found on the cycle feature seem a bit complicated. Is there an example of a simple staggerTo with cycle in a regular timeline anywhere? var tl = new TimelineMax();".circle", .5, {opacity:-1}) .staggerTo(".boxes", 1, { cycle:{ opacity:[-1, 1] ease: [Power4.easeInOut] } }, 0.05) .to ..... -thanks
  11. Hi Is it possible to add a staggerTo or staggerFrom to all the lines of text in a paragraph programmatically? I appreciate I could wrap all the lines in spans, but it's part of a piece of text that won't be fixed in size, so the number of lines will change dependent on device, window size. Also, is this a bad idea generally in terms of performance? I've included a codepen above with two paragraphs that are part of a stagger, but I was wondering about having each line stagger (note: if it is possible I would put all the text within one element / #id. I just did two elements in the example so i had something to stagger). Any ideas / suggestions welcome. Emily
  12. I'm setting a delay as a negative number to simulate staggering. I'm wondering if there's a better way to achieve this with nested timelines.
  13. When targeting a single class in Vanilla JS staggerTo doesn't seem to work correctly, when using a array of classes it works fine. Works fine if using jquery in commented out code. Please advise.
  14. ryanf

    StaggerTo Index Value

    What is the syntax to pass the index value of a StaggerTo tween to another function via OnUpdateParams? I've tried: onUpdateParams:[$(this).index]} onUpdateParams:[{self}.index]} Neither of which are working. See pen for example. Thanks.
  15. Todd Shelton

    Opacity in StaggerTo

    This is so simple that I have to be missing something easy. I'm setting the paragraph element to an opacity of 0; Then I'm splitting the text into words. I'm then just trying to stagger the words to an opacity of 1. I can't get this to work. I can make it staggerTo opacity of 0 but not the other way around. Here is my Codepen. TweenMax.set("p", {opacity: 0}); var text = new SplitText("p", {type: "words"}), words = text.words; var tl = new TimelineLite({delay: 1}); tl.staggerTo(words, 1, {opacity: 1}, 0.1);
  16. Robert Wildling

    Jalousie Effect

    Hi there, (I open a new ticket. The original question was here: but that topic is already answered and my question probably won't be seen anymore.) The CodePen shows some variation of a jalousie effect, that Shaun posted as an example in the forum post mentioned above. Playing around with that (mostly adapting it to vw and vh), it happened at one point that there was a "running shadow" introduced. It happens very subtle after the second animation is coming to its end: the slices are fading out, and just a tiny little bit later the slice flashes up for a moment again in a very, very bight grey. Hope you can see that. I was wondering, why this "running shadow" effect is happening? Thanks for any hints!
  17. valent_inf

    staggerTo working once

    Hey, I'm having some trouble with GSAP and the .staggerTo. The fact is : the staggerTo is working the first time I'm hovering an element and it's unstaggering as I want when I leave the el but when I'm hovering it again the staggerTo isn't working anymore ! Here the code : for (var i = 0; i < hexagons.length; i++) { hexagons[i].addEventListener('mouseenter', function(e) { var propSelected = this.dataset.prop, links = this.querySelectorAll('.mini_vid_link'); function findProp(prop) { return prop.prop === propSelected; } var thisProp = propositionsVideos.find(findProp); = "url(" + thisProp.background + ") center center no-repeat"; = "cover"; if (thisProp.orientiation === 'left'){, 0.6, { x: 0, autoAlpha: 1, ease: Power3.easeIn }, 0) .staggerTo(links, 0.6, { x:-20, autoAlpha: 1, scale:1, ease: Elastic.easeInOut.config(1, 0.3) }, 0.2, 0) } else {, 0.6, { x: 0, autoAlpha: 1, ease: Power3.easeIn }, 0) .staggerTo(links, 0.6, { x:20, autoAlpha: 1, scale:1, ease: Elastic.easeInOut.config(1, 0.3) }, 0.2, 0) } }, false); } for (var i = 0; i < hexagons.length; i++) { hexagons[i].addEventListener('mouseleave', function(e) { var propSelected = this.dataset.prop, links = this.querySelectorAll('.mini_vid_link'); function findProp(prop) { return prop.prop === propSelected; } var thisProp = propositionsVideos.find(findProp); if (thisProp.orientiation === 'left'){, 0.3, { x: 30, autoAlpha: 0, ease: Power3.easeOut }) .staggerTo(links, 0.6, { x:20, autoAlpha: 0, scale:0.8, clearProps: 'all', ease: Sine.easeOut }, 0.2, 0) } else {, 0.3, { x: 30, autoAlpha: 0, ease: Power3.easeOut }) .staggerTo(links, 0.6, { x:-20, autoAlpha: 0, scale:0.8, clearProps: 'all', ease: Sine.easeOut }, 0.2, 0) } What i'm doing wrong ?
  18. Hi there, Having a bizarre issue with Callback functions within a repeating timeline & I can't seem to resolve it! I'm fairly new to this, but I can't seem to figure out / research what I'm doing incorrectly. What I'm attempting to achieve is this animate div in let it sit for 2 seconds animate div out move onto div with same class rinse / repeat Like I said I'm fairly novice, but I know I need to use a timeline because I'm planning on stopping the animation at some stage. Any direction would be greatly appreciated Cheers! Matt
  19. Hello there, I'm a complete newbie: I animate this logo: The code is a mess, I had to create 6 timelines to do the same. How can I make it a function, I figure StaggerTo() will do it, but I can't find way to chain multiple morphSVG ... Is this possible? Thanks in advance.
  20. 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?
  21. I have created two pens as I cannot combine both in the same pen example to explain my issue. Pen1 (part 1) The clock ticking tween repeats for 3 times as seen on the pen. Pen2 (part 2) At the end of my pen 1, I want Pen2 to follow without any delay. My objective is to join these two pens. (And at the end, I will have to join this single pen to my main project - i.e, - I will handle this part) As you can see, for the clock loop tween, I'm using a new variable - var time = new TimelineMax . . time.staggerTo(".clock", 1.04, {display: 'block'}, 0.25) .to(".clock", 0, { display: 'none'}); which is different from my main variable - var tl = new TimelineMax(); . . tl.staggerTo([frame274_12a, frame274_1, frame274_2,frame274_3], 0.32, {display: 'block'}, 0.25) My main project is based on 'tl variable. For some reason, I cannot loop and join the second tween (Pen 2) using the same timeline variable. This looks simple, for some reason, none of my solutions are working. If this can be achieved, it would help me to apply similar solution to other animations. Kindly help me on this.
  22. zachschnackel

    TimelineMax stagger animations - repeatDelay

    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');
  23. 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:
  24. robbue

    onCompleteAll for staggerTo 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?
  25. Tahir Ahmed

    does delay work with cycle?

    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?