Search the Community

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?

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!

The code pen contains two simple staggers. The first contains a superfluous obj1. Neither versions seem to work. What am I missing? Thanks

Hello! Is there any way that I could manipulate the duration of each tween in a staggerTo() function? Thanks!

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..

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.

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

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?

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?