Search the Community

In TweenMax 2.x, use TweenMax.staggerTo, first element yoyo repeat first. https://codepen.io/7up/pen/LYEpRXg But in gsap 3.x, use stagger attribute, first element start first, but yoyo last. not same result as above. https://codepen.io/7up/pen/bGNVwJp How, can I get the same result using gsap 3.x? @ZachSaucier

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.

Hey, I just have a question regarding behaviour of stagger methods callback onCompleteAll. onCompleteAll does not fire whenever there are no DOM elements found by a tween - in other words, when there's no target DOM to tween (eg. ".nav-item" does not exist), onCompleteAll does not fire. I wish it would, since I have chain logic in my app. I also do not want to validate whether target elements exist every tween call. I simply resolve a promise on the callback and since stagger does not complete, promise does not resolve. How to deal with that? Thanks

Hi all, I’ve been wondering if currently there exists an easy way to target the 9 typical transform points of a box / grid with the new staggers? TL - top left TC- top center TR - top right ML - middle left MC - middle center MR - middle right BL -bottom left BC - bottom center BR - bottom right Those 9 reference points are common typical points of transforms. I see there is already various nifty calculations being done but is that 9 position logic also 'dynamically' possible even with reflow (like others) within the new advanced staggers? ¯\_(ツ)_/¯ Thanks everyone!

Hi guys! I'm working on a project for which I'd like to animate the drawing of a handwritten signature. The desired effect is to have it like it's being written. Here is the base file: I tried to vectorize the image using Illustrator, which worked, but the paths that are created are "looped", meaning that it's not one stroke. Thus, when I stagger the paths, they appear to do a "round-trip" around the letters. Do you know of a way that would allow me to animate it in one stroke? Preferably one that doesn't involve redrawing the whole signature manually Thank a lot in advance.

Hey everyone, I was staggering some elements from the middle by using cycle and a delay function. Diaco showed me this formula a couple years ago. return Math.abs(Math.floor(yourElements.length / 2) - i) * 0.25; This works great for an odd number of elements, but with an even number of elements the middle two should start at the same time so this function doesn't work correctly. I came up with a new formula for an even number of elements. return Math.floor(Math.abs(yourElements.length / 2 - 0.1 - i)) * 0.25; That seems to work just fine. I'm just using the modulus operator to figure if the element list length is odd or even and then using the appropriate formula to return the correct value. My question is can anyone think of a way to calculate it with one formula whether it's odd or even? I'm thinking I'm gonna need two different formulas which is no big deal, but wanted to make sure I'm not missing something obvious here. Happy tweening.

Hi If I have a staggerFrom tween that runs from left to right, is there anyway of having the stagger go from right to left on a series of elements? I don't want to reverse the timeline because the stagger is part of a wider / larger animation and when I use the .reverse() method it obviously reverse the timeline. I've given a simplified example below (Codepen example included). The red box comes in from the top and there is a stagger on the blue boxes that come up from the bottom (going from left to right). Is it possible to stagger the blue boxes so they still come up from the bottom, but stagger from right to left? Many thanks var tl = new TimelineMax({repeat: -1}); tl .from("#box", .8, {y:-60}) .staggerFrom(".box", .8, {y:60}, .15)

Hello, I want to start by saying i'm a noob to programming in general, as to javascript and green sock. As soon as I learned some html and css I dived into SVGs. I have an illustration background so this seamed appealing and most fun to me... I quickly realised that greensock is the way to go... So, I want to animate my logo appearing in a sci-fi kind of way, where there is a bunch of stuff happening. This isn't the logo animation but a test. I want to learn what I can and can't do... I am trying to use a single svg and make it appear a bunch of times using the staggerfrom. The plan was to create a symbol and then call on it as many times as I need. Then make them stagger on to the screen. The problem is I dont know how to call on those symbols with Tween... I tried giving my <use>es Ids, classes and even putting every <use> element inside of a div. The first two just don't make the animation work. When I put it inside of a div then the animation works but the called <use> symbols are just not visible. Am I doing something wrong or is it not possible? Is there a workaround? I know there must be but my general knowledge is limited at best. romb.svg

Dear All, Hello. I have encountered a problem regarding to StaggerTo . My case is like this: 1. I have a simple svg file stored in my firebase realtime Database as a node as below (i copied the whole file as text as paste it as string node): (I know I should write my case in CodePen but I don't know where I should put my svg as an external file for CodePen to read from. I apologize for that.) <svg onload="init(evt)" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" id="slider1Svg" > <script type="application/ecmascript"> <![CDATA[ function init(evt) { TweenMax.staggerTo($('.star'), 2, {scale:3.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true, repeat:-1}, 0.2); } ]]> </script> <g id="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="72.574,123.936 71.155,123.877 70.302,125.014 69.918,123.646 68.574,123.186 69.757,122.398 69.779,120.978 70.893,121.859 72.25,121.441 71.757,122.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,167.936 162.155,167.877 161.302,169.014 160.918,167.646 159.574,167.186 160.757,166.398 160.779,164.978 161.893,165.859 163.25,165.441 162.757,166.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="206.574,167.936 205.155,167.877 204.302,169.014 203.918,167.646 202.574,167.186 203.757,166.398 203.779,164.978 204.893,165.859 206.25,165.441 205.757,166.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,247.936 162.155,247.877 161.302,249.014 160.918,247.646 159.574,247.186 160.757,246.398 160.779,244.978 161.893,245.859 163.25,245.441 162.757,246.773 "/> </g> </g> </svg> You can see I am using "onload" in the opening <svg> tag. 2. Then in my javascript file, I append the node to the div like this: firebase.database().ref('svgfile').once("value", function(data){ var svg = data.val().svg; $('#container').append(svg); }) 3. My Stars Twinkle in the below browsers (all up-to-date versions and cache cleared ): Windows 10 - chrome edge MacOs - safari firefox Android - chorme opera unfortunately the stars do not twinkle in the below browsers: ipad pro chrome safari opera and I tested on my very old ipad mini with iOS version 9.35, safari, the stars also twinkle. May I ask if this is the problem caused by the OS? My goal is to match a corresponding animation code with the svg file, so I don't need to put all the animation codes into the main.js , like below: 1.svg use "code for 1.svg" 2.svg use "code for 2.svg" etc. Beside writing the animation codes in the <script> in <svg> , may I ask if there is another way I can achieve this? Thank you very much for your help. Cheers, Alex

Hi, I was wondering if it was possible to create an animation and 'stagger' it over a list of element. I explain myself, when using stagger you can only use the 'y' (or other css property) property only once like this : var tlGo = new TimelineMax({paused: true, repeat: -1}); tlGo.staggerTo(".line", 1, {x:50}, 0.005); // In this case each line would go x:50 one after the other // But what if I want to do x:50 then x:0 one after the other??? What if I want to stagger a more complex animation : var tlGo = new TimelineMax({paused: true, repeat: -1}); tlGo.staggerTo(".line", 1, {x:50}, {x:400}, {y: 200}, {x: 100}, {y: 50}, 0.005); //This obviously won't work, it's a way to explain my point. What I would like to do is something like that (creating a complete animation) : tlGo.to(".line", 1, {x:50}, 0.005) .to(".line", 1, {x:300, y: 20}, 0.005) .to(".line", 1, {x:20, y: 200}, 0.005); and then stagger this to each element. I'm thinking about using a simple loop, but I would prefer do it the GSAP way if a GSAP way is available. Hope you understand my question. Thank you In the Codepen example I'm doing like this : var tlGo = new TimelineMax({paused: true, repeat: -1}); tlGo.staggerTo(".line", 1, {x:50}, 0.005) .staggerTo(".line", 1, {x:0, ease:easing}, 0.005, '-=.99'); But it's not exactly what I want to do. The timing is really hard to manage that way.

Hi guys, I'm trying to stagger groups of paths. I have 4 groups, that I want to simultaneously start drawing but stagger the paths inside of each group with 0.5s. Currently, I'm just writing it 4 times starting them at the same label, and repeating the same tween code. Is there a way to shorten the code so I don't repeat it 4 times? If I add elements into the array, the timing is off. I could also write a function and pass the elements, but would it start at the same time? Is there a keyword maybe in tweenmax stagger feature for this? Thank you! const tl = new TimelineMax(); tl .staggerFromTo( '[id^=top-left] path[id^=top-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=top-right] path[id^=top-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-left] path[id^=bottom-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-right] path[id^=bottom-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )

Hi all, I'm very new to GSAP, so here is my question: let's say i've a page with different post or project elements, each one made by a container and all his childrena. I've a timeline that define the animation i want to use to "unfold" this kind of containers, but since each one have the same sub-elements with the same classes, everything happen at the same time. The staggerTo method would create a sequence just within the same element of each class in all the container at the same time. Instead, i would like that each of those container unfold indipendently, or actually with a minimal delay between they all, each one fallowing the same timeline. Is there a way to do that? Was my explication clear enough? Thank you all!

Hello, I want to replicate some sort of an explosion animation. For this, I have an SVG with quite a few particles (presented with `<path>`) being spread out across the whole canvas. This represents the end state of the animation (explosion). In the beginning of my animation I want to animate all the particles' `x` and `y` from the center of SVG so that the particles gradually get to their end positions from the epicenter of the explosion. Now the question is how to achieve this in an efficient way preferably without looping through all paths and calculating their offsets in relation to the parent SVG? Thank you.

Hi everyone! I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars! I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!! I would very appreciate any kind of help. Thank you!

Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!

Hi All Having a bit of a problem with staggered animations. I want to stagger a list so that it fades in and moves up, pauses for 1s, then fades out and moves up even more, effectively: Fades in from y:100 Pauses for 1s Fades out to y:-100 I tried with a staggerFromTo but it just whizzes past and everything is performed in 1 go, putting a delay only delayed the start of the animation, not put a pause in the middle. I tried with a timeline, which works, but only for 1 item, when multiple items are used, they stack on top of each other in a mess. Any help appreciated

Hi guys, I am wondering is there is a way to create a stagger animation with random stagging time, using the stagger methods. Thanks in advance...

Is there a way to reference the item's index from the vars. For example: TweenMax.staggerFrom($items, 1, { y: -100 * itemIndex }, 0.5); I can calculate the index like this: $items.index(this.target) but it seems like it's something that TweenMax should expose directly.

I have created a basic drawsvg animation where the content of the circle fills with a colour. I will have multiple circles on a page so I want the animation to loop through each item which I have achieved with the staggerFromTo. The next step is to feed in dynamic values for the drawsvg animation which I was hoping to pull from data-percent="x" as the values will be output on the page. I have done this but I am not sure on the best way to loop through this data...as at the moment it only pulls in the last data att value rather than the unique value for each circle. I hope my intention is clear. Any help would be appreciated

In my Codepen is an example of 4 bubbles animating. Each one enters from the bottom and pause in the middle of the page, then leaves upwards. However, I want to be able to achieve this with one animation, so that it doesn't matter how many Bubbles are in the page, it's going to fire them all up one by one just as it is in my example. I had experimented a bit with `staggerTo`, `staggerFrom` and `staggerFromTo` which I understand are intended for this purpose, but I couldn't quite nail the exact desired functionality. Is there a solution for this?

I'm trying to change the origin point of my staggering elements. Both are a path which visualy start drawing at the top of the line then goes down. Is there any way to tell GSAP to start at the bottom of the path then up. I tried with transform orignins without success. Thanks in advance!

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.

Hi! First of all, thank you very much for making this excellent library. I wish I would have found Greensock long ago, but better late than never. I have a relatively simple problem, but I can't figure out an elegant way to animate it. I have three circles, and I want the background color to change from green to red with stepped easing and hold for 1 second. Then the next circle in line changes from red to green, and so forth. This is the effect I'm looking for: I think that TimelineMax.staggerTo is what I'm looking for, but I can't quite get it to work as expected. Can anyone give me any pointers? Thanks for reading! Ty

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")

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?