Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'staggerfrom'.

  • 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



Found 24 results

  1. I'm playing around with this amazing library. What I'm currently doing is to stagger animate a list of words. How do i stop the animation of a particular elem in the list while they're being animated one by one by TweenMax stagger method Requirement: If a condition is met, i want to stop a particular element in the stagger.
  2. Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagge
  3. Hi. first time to post here. I wondered how to start specific elements' animation at same time in Timelinelite with starggerFrom methods? Let's say I have 5 elements and I want to make 2nd and 3rd animation start at the same time. Is there any settings I can use in staggerFrom?
  4. Hey all, I'm getting an issue in Chrome when all my page animations stick part way through for a few milliseconds causing a jittery moment. It's during the animation of an SVG logo where I'm staggering the animation of letters of 2 words into view at the same time. I've attached the screenshot of the issue in Devtools where I believe a grey and striped area means unidentified/unknown (to DevTools) activity that is not occurring in the main thread. If I take out the second stagger the issue disappears. Has anyone come across this before or have I done anything funky below? I can't s
  5. 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. 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) https://codepen.io/kpendic/pen/xYwRey?editors=0010
  7. Is it possible to staggerFrom the same point on a relative positioned div? The Circles all start from 200px from their individual positions, whereas I'd prefer them to start at left:200px in absolute coordinates. Thanks
  8. Hi there, I am integrating GSAP with fullpageJS. for some slides, i am using the same timeline for the elements to fade in when a user gets on a new slide. This is how i set my animation var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn },0.2); for now the animation will run for all slides when the user gets to a slide. for example if the user gets on slide 1, the conten
  9. 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
  10. 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. http://codepen.io/rfenik/pen/gmeNEp Thanks.
  11. I'm trying to get a staggerFrom animation to occur on a scrollmagic event with the following code however, the stagger always seems to happen instantly on page load rather than waiting for the scroll magic event to fire. var tween = TweenMax.staggerFrom(targetDivs, 2, { opacity: 0 }, 0.5), scene = new ScrollMagic.Scene({ triggerElement: element, reverse: false, }); scene.setTween(tween) scene.addTo(this.controller) scene.addIndicators({ name: "staggering" }); this.scenes.push(scene); Using other simple tweens
  12. G'day. My apologies if I haven't done this correctly. Literally my first time on here and presenting a pen. So my issue is this...I am building my webpage, and the portfolio page opens with the navigation bar at the top and social media bar at the bottom (irrelevant for this demo because these animations work), tweening from opacity 0, then my 14 portfolio buttons staggering in from left one by one to array in a 3 x 5 formation: var $Nav = $('Nav'), $socialmedia = $('socialmedia'), $imggal = $('imggal'), tl = new TimelineMax(); tl .from("#Nav", 2, {opacity:0}) .from("#socialmed
  13. Hi all, I'm a beginner with GSAP and I've got a problem with the "staggerFrom" tween. All "move" divs are animated : they are coming together (like one raw) and not one by one. I don't understand why, I don't know where the problem is. Could you help me, please ? Thank you very much. Here is my HTML code : <div class="consigne"><b>Complète les expressions à l’aide des mots suivants :<br><br> <div class="move" id="word1">vol</div> <div class="move" id="word2">nuée</div> <div class="move" id="word3">rangée</div> &l
  14. Here's the site where you can see it in action: http://siegfriedmedia.com I've been trying a number of different combinations and can't find the right one to get rid of the slight page jump at the end of the 'yoyo' of the first three-line h1 that appears. After that the next three-line h1 and multiple line paragraph underneath it appear, and then the arrow appears. I don't think it's the arrow that is causing this, I think it is the paragraph with id=intro3 that is causing it? I'm not sure and I'd like to have the slight page jump not happen. You won't see the page jump I'm talking abo
  15. Hi ,Excuse me ,I don't speak English very well , I am French student ah ah I have two layer Sketch1 and Sketch2 .How run multiple staggerFrom same time ? , with the Sketch1 and Sketch 2. My two sketch (1 and 2) are composed of several square Group The Sketch2 starts when the Sketch1 ends. Thank you everyone !
  16. Hey folks, either I´m blind or there is no answer yet to my question: I would like animations only to happen once when scrolling in, but when scrolling out (backwards, so the trigger is active again) and then scroll in again I dont want the animation to reverse and run again. So long story short: the animation should only be triggered once and then the animated elements should stay where they are forever indepently of scrolling back:) I found only this http://greensock.com/forums/topic/7832-disable-reverse/ but it seems not to be up to date anymore. Is there a simple way to ach
  17. Hi GSAP team! I have discovered your GreenSock.js few days ago and really got impressed - nice work! And I have started playing with simple TweenMax from & staggerFrom examples, but along the way got some strange results. ---------------------------------------------------------------------------------------------------------- So, here is my basic work so far: EXAMPLE 1: TweenMax.from(".explodedLogo.letter_O, .explodedLogo.letter_o", 1, {delay:1, rotation:22.5}); RESULT: http://i.imgur.com/s5BT3SD.gifv EXAMPLE 2: TweenMax.staggerFrom(".explodedLogo", 0.5,
  18. Hi guys, I'm having problems implementing the onCompleteAll function within my TimelineMax animation. My code looks like below var tl = new TimelineMax(); tl .from('.text1',0.5,{opacity:0, y:'+=10'}) .to('.text1',0.5,{opacity:0},'+=3') .from('.text2',0.5,{opacity:0, y:'+=10'}) .staggerFrom('.footer',0.5, {opacity:0, y:'+=10'},0.2, addBirdEvent) function addBirdEvent(){ console.log('footer animations done') } Problems are: The stagger animation runs immediately. I'm expecting it to run after the previous animation ends. The addBirdEvent (which is my onCompleteAll function) also runs
  19. 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?
  20. add_action( 'wp_enqueue_scripts', 'centric_enqueue_home_scripts' ); /** * Enqueue Scripts */ function centric_enqueue_home_scripts() { wp_enqueue_script( 'homeintro', get_stylesheet_directory_uri() . '/js/homeintro.js', array( 'jquery' ), '1.0.0', true ); } Here's what I have for enqueueing the the javascript. I am using a Genesis theme and have installed the following in the theme setting's wp footer: <!--CDN link for the latest TweenMax--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
  21. 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
  22. Hello, I am having a little trouble with finding a good equation for animating text with a fixed play length. A user needs to be able to tell me: "I want this animation to play for [x] amount of seconds" I am using TimelineMax.staggerFrom with a SplitTextField to make this happen. I first need to ensure my understanding of StaggerFrom is correct. In this case, lets say we are doing a fade in by character. Here is my understanding of how this should work: T = total time (2 seconds in this case) C = total number of characters (let' use the word "Hello", so this i
  23. Hello, I've just begun using Greensock (and it looks great already, thanks!), and I've already programmed myself into a corner... tl.staggerFrom(".product_div", 0.5, {top:"1000px", ease:Power2.easeInOut}, 0.1); Just a normal staggerFrom, right? The ".product_div"'s are just a bunch of boxes I'd like to animate 'into place' from the bottom of the screen.The thing is, the elements animated are visible at their 'final' position (floating left), and it is quite normal that I will see them for a microsecond at their 'end' position before the animation starts, but... I'd like to make them in
  24. 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