Jump to content

Search the Community

Showing results for tags 'stagger'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi there, I am new to greensock and even to jquery/javascript at all. I am trying to scale the "g" parts of a svg element from 0 to 1. It already works but the elements don't stay in their end position when they are animating, but "move" in along the x and y axis. I am wondering if there is a way, that they stay fixed in their position and just scale from 0 to 1? I already searched the forum and found advises about transformOrigin, but none of them solved my problem.
  2. Such as dealing of cards. You are doing a similar animation but each element ends up in a slightly different position. I know I can animate them one by one and delay each one slightly like in the example code below but is there a shorter and more effective/elegant way of doing this? Thanks in advance! .to('.element1', 1, { x: "+=30", ease: Power3.easeInOut }, "frame1+=1") .to('.element2', 1, { x: "+=60", ease: Power3.easeInOut }, "frame1+=1.15") .to('.element3', 1, { x: "+=90", ease: Power3.easeInOut }, "frame1+=1.25")
  3. What is the easiest way to always randomly shuffle all items in an array and then stagger them. var items = [a, b, c, d, e]; <-- Random order everytime TweenMax.staggerTo(items, 1, {opacity: 1}); 1) I can first randomize my array by following this link http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array Then only do my stagger effect. 2) Or can I use the new .cycle method in stagger. Will that be something I can leverage? Or any better/simpler ways?
  4. Hello there! I had a quick question about the stagger effect. I have a timeline of animations ("tlgrass") applied on a same class (".grass"), and I am looking to delay each .grass element by a few seconds in a staggered effect. So each .grass element would go off delayed by x seconds each, but they have the same animation effects applied. I am not sure how to go about doing this. Is it possible to nest a timeline under a TweenMax.staggerTo function? Or maybe by passing a function? var grass = document.getElementsByClassName("grass"); var tlgrass = new TimelineMax({ repeat: -1, }); // This is the animation I would like all the grass objects to do tlgrass.to(grass, .8, { transformOrigin:"0% 100%", skewX:"10deg"}) .to(grass, .5, {skewX:"0deg", ease: "linear"}) .to(grass, .8, {skewX:"-12deg"}) .to(grass, 1.5, {skewX:"0deg",}) Thanks in advance!
  5. The code pen contains two simple staggers. The first contains a superfluous obj1. Neither versions seem to work. What am I missing? Thanks
  6. Hello! Is there any way that I could manipulate the duration of each tween in a staggerTo() function? Thanks!
  7. Hi, First I want to say I'm really happy that I'm using GSAP! it's wonderful .. Please check out my Pen ... Here we have 3 sets of elemnts and I want to stagger the 3 of them with a stagger time of sy 0.1s and simultaneously stagger the elemnts inside them .. right now the elements of the second block wont start their animation until the last elemnt of the previous block animates ... so basically I want to stagger 3 blocks of staggering elements, I don't want one block to wait until the previous one is done. and I have to start the whole function with $(".fade-scroll").each( ... so please don't suggest to change that also I dont want to use setTimeout function somehow by getting ".quick-info-item" and ... would be great I'll appreciate it very much if anyone could help me..
  8. How to ensure that the snake-like animation in https://codepen.io/TobiReif/pen/b7809c58663ddac3572f5594ffc4f5fe/ is even? Each column of dots should move up with ease-in-and-ease-out (eg sine) and should move back in the same way: slow upwards, fast upwards, slow upwards, then slow downwards, fast downwards, slow downwards; loop. The current animation is roughly what I want, but it seems to be faster at the top and slower at the bottom. Each column of dots seems to jump up and down, resting at the bottom only. I had no luck using repeatDelay, and I think a clean solution would not involve repeatDelay. Instead I need something like "sineAnimationUp;reverse;loop" or simply "sineWaveAnimation" == forth and back exactly like a sine wave.
  9. Hi all. Here is what I want to learn today. I have a simple fade in/fade out animation of several boxes. I want to repeat the animation but this is how I want to do it: box 1, box 2, box 3, box4, box 5 - hold box 5 on the stage for a second then repeat box 2, box 3, box4, box 5 - hold box 5 on the stage forever. here is my code pen http://codepen.io/jeansandjacketrequired/pen/rLyRgB I think I may be looking into implementing nested timelines - correct? something like this? tl.add( firstPart() ) .add( secondPart(), "-=0.5") //overlap 0.5 seconds - - - - Edit: OK. This is how I think I should build this simple animation. Timeline1 repeat 2 Box 1 Box 2 Box 3 Timeline 2 (or nested timeline) no repeat Box 1 Box 2 Box 3 Box 1 and hold
  10. Hey guys, I am totally new to GSAP (I just started using it last night), not to mention a junior developer in general. I want to animate some elements on a page to move accross the page and fade out, all with the same class. The part I am confused about though, is that in order for the elements to move they must be given a position property of absolute or fixed. (At least that's what the greensock tutorial said I had to do). When I apply this position property to the elements with the class I want to animate, they all stack on top of each other in the same place. How do I keep the elements from starting and ending at the same place in the window with this css property applied?
  11. Hi all, I am reading through Google Material's motion guideline. There is one particular effect that is interesting yet I am trying hard how to do this in code. The page: Choregraphing surfaces https://www.google.com/design/spec/motion/choreography.html#choreography-creation Video: https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B14F_FSUCc01X1hUU2x6dWpQX1U/CreationChoreo_03_StaggerDo_v3.webm - I could put them into an array and display them one after the after from left to right and then drop to a second row and display the next set and so on. But how do I display them from left to right and top to bottom at the same time?
  12. squxd

    SVG Hovers Cont. -

    Hey all - As you may or may not have seen my previous post, this one has a few different issues I was unsure of how to fix. I am pretty satisfied at this point. The only other things I was struggling with were... 1) When hovering over the "U" or "D" to highlight the other svg's (U-X-D) blue. I was using the ':not' some in $(".blue-uxd:not(#diamond)").hover(function(){ joinButton.hide(); uxdButton.show(); 2) This line works but there are still some issues where the diamond does not return to a full 100% and stops mid-hover. And when animating back up it still fades quickly from black to blue. Could I use a switch or something that only activates if the diamond reaches the top/floating step? TweenLite.from("#diamond", 1, {fill:"#00bbd3", progress:0}) 3) And when I hover over the "X/A" the " join button fades out and the "What are you waiting for?" fades in right after... $("#xa-flip").hover(function(){ button.hide(); uxdButton.hide(); joinButton.hide(); hiddenButton.hide(); joinButtonActive.show() TweenMax.to("#joinButtonActive", 6, {delay: 2, autoAlpha:0}); TweenMax.staggerFrom("#hiddenButton", 2, {autoAlpha:0}); joinButtonActive.hide(); hiddenButton.show(); }, function(){ joinButtonActive.hide(); hiddenButton.hide(); button.show(); joinButton.show(); }); thank you very much, nick
  13. Hi, I am wondering what's the relationship between stagger's duration and stagger's staggerDuration. Looking at this code: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25}). The time duration is 1 but there are 3 elements to stagger. mc1 = 0.25, mc2 = 0.25 + 0.25 mc3 = 0.25 + 0.25 + 0.25 1 - 0.75 = 0.25 (What happen to this extra 0.25?) - Is the duration the total duration for the whole stagger code (mc1, mc2 and mc3 combined?) And the stagger duration will modulate to fit within the whole duration? Thanks, Venn.
  14. Hi again, Another newbie question. Can anyone help. I am trying to get the last element in my timeline to start before the previous animation finishes. Thanks in advance. var h = $("h1"), para = $("p"), over = $(".overlay"), mod = $(".header-cta .module-cta"); var t1 = new TimelineLite() t1.from(over, 1, { css:{opacity: 0}, // /delay: 6 }); t1.from(h, 2, { css:{marginTop:400, opacity: 0}, ease:Bounce.easeOut, // /delay: 6 }); t1.from(para, 2, { css:{marginTop:600, opacity: 0}, ease:Bounce.easeOut, }, "-=1.3" ); t1.staggerFrom(mod, 1, { css:{marginTop:600, opacity: 0}, ease:Bounce.easeOut, }, 0.1, "stagger" );
  15. I have created a "pulse" animation using two staggerTo animations on TimelineLite. Initial play works well. However, restarting the timeline (on hover) plays all animations at once. I suspect it ignores initial delay values created by staggerTo? What am I doing wrong? Is there a better way to create this animation?
  16. I am looking for a way to use the staggerTo, etc. methods on TweenLite, but am not sure what plugin file to include. Plz help
  17. Hi guys, Trying to get a conditional 'repeat' happening with a stagger animation. I want to be able to set a boolean variable (cloudsOn) and if this is true, certain tweens will replay. If it is off, the tweens will not replay. I've managed to get this working in other more custom javascript ways (thanks to help on this forum), but wanted to see if there was a simple way using a stagger loop and onComplete to get this happening. I will post a CodePen but this may be enough to check if it is a simple fix. Thanks. // five .cloud elements in my SVG var cloud = document.querySelectorAll('.cloud'); var tlClouds = new TimelineMax(); var cloudsOn = true; var cloudCheck = function(tween){ if (cloudsOn){ console.log(tween); // Successfully logs the individual tweens of the stagger, targeting individual .clouds. tween.seek(0); } }; tlClouds .staggerTo(cloud, 2, { cycle:{ x: [-400, -200, 0, 300] }, onComplete: cloudCheck, onCompleteParams: ['{self}'] }, 0.2) ;
  18. oby1

    How to stagger?

    Hello, so I am trying to animate letters individualy. for this purpose I'm taking text out of a jason object, breaks it into individual letters, and set each individual letter in its own <div> . the ideas is to be able to animate each letter individualy using stagger. However, as you can see TweenMax.staggerTo(elements, 5.5, { opacity:1}); changes the opacity of all the elements at the same time. Any idea why stagger is not working as I think it should? <div id = 'test'></div> #test { height: 500px; width: 500px; position:absolute; } .textlineholder { width: 100%; display:inline-block; position: relative; } .letter { display:inline; position: relative; opacity: 0; } $( document ).ready(function() { var test = document.getElementById('test'); var myArray = { "text1": [ { "txt":"Hello, hello, hello..", "x": "0", "y": "50", }, { "txt":"is there anybody in there?", "x": "0", "y": "100", }, { "txt":"just nod if you can hear me", "x": "0", "y": "150", }, ] } ; for ( var i=0 ; i < myArray.text1.length ; i++) { var linecontainer = document.createElement('div'), letters = myArray.text1[i].txt.split(""); linecontainer.id = 'line'+i test.appendChild(linecontainer); linecontainer.className = 'textlineholder'; for ( var k=0 ; k < letters.length ; k++){ textdiv = document.createElement('div'); textdiv.id = 'textdiv'+i+k; linecontainer.appendChild(textdiv); textdiv.innerHTML = letters[k]; textdiv.className = 'letter'; } } TweenMax.staggerTo($('.letter'), 5.5, { opacity:1}); });
  19. 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?
  20. Oh how I love GSAP’s staggering. It’s so simple, and yet so powerful. The one thing that I wish it could do, though, is seamless staggering. See the animation at http://codepen.io/garyc/pen/OyMmvB?editors=101 I had to add a bunch of repeating to have seamlessness between each iteration. However, eventually the repeating stops, after the last repeat. I know I could set repeat to -1 but that would mess up the outer timeline’s duration (see the trackbar). To get a better sense of what I am talking about, in the codepen, remove the repeat and yoyo in the charAction by changing the anim entry to this: anim:{ dur:4, stagger:0.12, ease:"curve inout" }, rotation:{x:360} The characters all have to stop before the main timeline can start again, so at the beginning and end of the outer timeline there are characters that aren't moving. I’d love to be able to pass in a seamless flag that pre-positions all the characters before the last one, skipping part of the animation, using the ease, and right away starts all of them. It would also handle the end of the timeline by continuing the animation what was skipped at the start for all but the last one So, I wouldn’t need to repeat, the outer timeline would be as short as possible, and the animation could be looped forever without characters stopping.
  21. I'm replicating a tweenMax staggerFromTo which should display text one character at a time and changing the color of the characters. The color is irrelevant. Instead of doing this the full line of text just flashes once with no color change. I've attached the full code. Please help. thanks, Michael test1.html
  22. Hi, I am trying to stagger the opacity of all of the polygons, lines, etc that are part of an SVG (there are 900 elements). I have a basic codePen set up and I think I would need to make an array for all of the elements inside of my SVG in order to stagger the opacity of each piece, but I'm not really sure that is the way to start. The codepen only has 4 elements to simplify things, but the SVG I wanted to animate has about 900 separate pieces. I want to target all of the pieces inside on my SVG and stagger their opacity efficiently, if I have 900 pieces... I am finding that with so many shapes, it goes very slow only because there are so many shapes and it takes time for them all to render--so I want to try and overlap them with a large number, so elements would pretty much animate at the same time... or better yet, be able to set a time so that all elements would animate in within 3 seconds... is that possible ?
  23. 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?
  24. Hi, I haven't used the stagger function much but would like to take advantage of it. I have the following: //create the timeline var tlNav:TimelineLite = new TimelineLite(); var clips:Array = [clip1, clip2, clip3, clip4, clip5]; //Thumbs are coming in tlNav.staggerTo(clips, .5, {y:755, alpha:1}, 0.2) which works as expected, but what I need to accomplish is to have all the icons go back down a split second after they moved up, like so: tlNav.staggerTo(clips, .5, {y:794}, 0.2) but can't figure out how to achieve this, since I am not sure how to cut into the started stagger tween in order to start animating the clips down in the same order. They should just pop up staggered and back down right after they have popped up. Perhaps I am overthinking things... Also when to use the TimelineLite and TimelineMax stagger methods? I am a bit confused about that. Thanks guys!