celli

Thanks! All because I left out the semicolon http://codepen.io/celli/pen/sreCn With regards to the other codepen you showed me, that's great -- But I can't see where the continuous flow code is. I have a feeling I would need to change the way this one works ? Or is there a piece of this continuous flow I can add into my code pen to make it continuous ?

Thanks! So, I can alter the codePen, and get things to work -- but the problem is having the container and the creature appended and dynamically created. I can't seem to figure out how to control the starting point of the creature(s) this way. I really just want to have the 'creature' be an element in my HTML, and control the animation with the JS. Here is a codePen, But if I could just make the 'creature' div in the HTML, then I can more easily control it's starting position. You see how all of the creatures are starting up in a column down the container. But if I wanted to start them all from the center of the container, and not use the "container.append(element);" code http://codepen.io/celli/pen/sreCn Also, I guess I can do it this way, but I wanted to add the bezier animation to the dots. And create it so that it looks seamless (without the looping look) So it looks like they are seamlessly floating up from a container http://codepen.io/celli/pen/zHuIs

I have been working on bezier animating, and nesting timelines and it is working very well. I have one more question now relating to how you were able to get the 'creatures' to multiply, and create various creatures at random positions. I am able to animate on the bezier, and randomize the positions with the code below var bubbleTL1 = new TimelineMax({repeat:-1}); bubbleTL1.to(".blenderCircle", 2, {bezier:{type:"soft", values:[{x:5 + Math.random() *100, y:-20}, {x:-5 - Math.random() *100, y:-40}, {x:5 + Math.random() *100, y:-100, opacity:0}], autoRotate:true}, ease:Power1.easeInOut}) .to(".blenderCircle", 1, {css:{opacity:0}, ease: Sine.easeOut}, "-=1") .to(".blenderCircle", 2, {scale:".5" }, "-=1"); But when I try and add the function to create a bunch of tweens and add them to a timeline, I can't get it to work properly. Here's what I did with simplifiedcode, I wrapped the original timeline in a function called 'getAnimation' just like your example here: http://codepen.io/GreenSock/pen/kyluC?editors=001 And then I am trying to use the function you created to build the timeline and create a bunch of Tweens -- But this is where I can't seem to get it to work. //wrapped my timeline in a function called getAnimation function getAnimation() { var bubbleTL1 = new TimelineMax({repeat:-1}); bubbleTL1.to(".blenderCircle", 2, {bezier:{type:"soft", values:[{x:5 + Math.random() *100, y:-20}, {x:-5 - Math.random() *100, y:-40}, {x:5 + Math.random() *100, y:-100, opacity:0}], autoRotate:true}, ease:Power1.easeInOut}) .to(".blenderCircle", 1, {css:{opacity:0}, ease: Sine.easeOut}, "-=1") .to(".blenderCircle", 2, {scale:".5" }, "-=1"); return bubbleTL1; } //create a bunch of Bezier tweens and add them to a timeline function buildTimeline() { tl = new TimelineMax({repeat:-1}); for (i = 0 ; i< 20; i++){ //start creature animation every 0.17 seconds tl.add(getAnimation(i), i * 0.17); } } buildTimeline(); What am I missing ? I must be missing something here...

Yes ! This reveals the concept to me very well. I see the pulsing GSAP on-top of the 'creature' and now I get it All of the other examples really help, I am going to deconstruct them all, and work this in. Awesome explanations, thanks! One question: In this example: http://codepen.io/GreenSock/pen/bkLwt What pauses the 3 timelines (outside of the master Timeline) ? Is it only because their time is specified in the 'master Timeline' ? If the 'master Timeline' wasn't there, I assume they would all run together, is that right ?

These examples really expanded my understanding of how GSAP works, thanks! I really like the slow pause and slow-start buttons done very simply like this: pause.onclick = function(){ TweenLite.to(bezierTween, 1, {timeScale:0}); }; But I am still a little lost on exactly how to nest a timeline into another timeline. For instance Ancient Warrior's example use the the element #creature placed into a timeline and animated, which I understand... But can I replace #creature with another timeline that I create ? Something like this: bezierTween = new TweenMax("ANOTHER TIMELINE HERE", 6, { bezier:{ type:"soft", values:[{x:150, y:300}, {x:300, y:30}, {x:500 + Math.random() *100, y:320*Math.random() + 50}, {x:650, y:320*Math.random() + 50}, {x:900, y:100}, {x:990, y:400}], autoRotate:true }, ease:Linear.easeNone, repeat:-1}); So where it says "Another Timeline Here' ...Can I do that ? And what would I do..., just pause the 'other timeline' so it doesn't run alone and set it somehow so it only runs inside of my bezier timeline, (which is my container timeline) ? This is where I am confused...

Hi, I was going to start experimenting with the bezier curves in greensock, and I like the example of the bug moving along the curve and then dispersing at random points along the bezier, as noted in the codePen URL from GreenSock. My Question is ,if I wanted to replace the 'bug' in this example with something animating, like a butterfly flapping her wings, and then animate that flapping butterfly along the bezier. What would be the best way be, to go about this with GSAP ? Similar to if I started out with a looping movieclip in Flash that had flapping wings -- and then I placed that into another timeline and moved the flapping winged timeline along a bezier (a second timeline) ? This will help me in general with nesting timelines properly with GSAP. Maybe I can create a timeline that doesn't play, but attach a variable to it -- and then insert that into another timeline that moves along a bezier ? What's the best way to build something like that with GSAP ?

Okay, I managed to get something working that is responsive thanks to the {xPercent:-50, yPercent:-50} which works quite well to keep each element's anchor point at the center, combined with left:50% and top:50% in my CSS to keep elements centered within my container. I think this is a better solution, than scaling the entire container and all of it's elements anyway -- but if there is a way to do that, It would be helpful to know, as it might be necessary for some things. Here is the result with 3 major break points at 991px 768px and 421px. But I could have also done it fluidly I guess, as your examples show. http://www.micelistudios.com/sandbox/gs/banner.html GSAP is Fun!

Hi Ancient Warrior, I have been experimenting with the xPercent and yPercent, and I think I see what it does, but I am having some issues, and some questions that maybe you can help to answer: 1. Is there a way to have a Master Container, and everything inside will scale proportionately when I rescale my browser ? or will the xPercent and yPercent keep elements only fixed at the center of my container only ? 2. I see if I use this CSS and JS Mix: //CSS to place origin of all elements in the center or their parent .myClass { position:absolute; left:50%; top:50%; } //JS //center all .myClass elements around their origins TweenLite.set(".myClass", {xPercent:-50, yPercent:-50});//handles all vendor prefixes of translateX(-50%) translateY(-50%) //now we can animate myElement's x/y such that its center is 100px,200px from the origin TweenLite.to(myElement, 1, {x:100, y:200}); It will now use the elements center as the anchor point, and add these elements to the center of my conteiner which is great for animating from the center. Can I easily add this to all of my elements with an array of some sort or maybe like this: TweenLite.set(".myClass1, .myClass2, .myClass3, .myClass4, .myClass5", {xPercent:-50, yPercent:-50}); 3. I assume that even if we can scale proportionately all elements together -- we would have a problem with fonts scaling as well ? 4. I guess the big question is my first question here. I see it works with rectangles in a container, and the text will wrap and not scale. but what if we had many elements inside of one container -- and when we scale the container -- we would also be scaling every element inside of that container together ?

That is great! Thank you.

Hi, I have some fairly simple tweens with timelineLite like this .fromTo('.circle-top', .5, {left: 268, top: 155, opacity:0}, {css:{left: 337, top: 83, opacity:1}, ease: Circ.easeOut }, "-=.5") .fromTo('.circle-bottom', .5, {left: 418, top:22, opacity:0}, {css:{left: 348, top: 92, opacity:1}, ease: Circ.easeOut }, "-=.25") And the width of my container is 760 pixels wide, so the animation is always centered with CSS until I reach 760px wide in my browser. Then when the browser resizes to under 768 pixels, I have a simple media query which makes the animation container 540 pixels wide like this: @media (max-width: 768px) { .anim-container, .circle-container{width:540px !important;} .circle-top{ left: 240px !important; } .circle-bottom{ left:250px !important; } } Also in the CSS you will see the absolutely positioned 'circle top' and 'circle bottom' switch their positions in order to stay centered in the 540px wide container (this is their end position). Which works just fine. However, when the animation plays at the 540px width -- the end position is fine, but the start position from GSAP tween isn't right (as you can imagine it is relative to the wider container) Questions: 1. Is there a way to simplify all of this in a responsive container to make everything scale ? 2. Doing this for every element in a responsive layout seems like it would take a very long time, since I'd need to measure the position of every element twice and probably 3x to get down to 320 pixels on mobile, there must be an easier way I'm missing ? 3. If we do it this way, is there a way to use media queries in the GSAP code to specify the' from' and 'to' positions depending on the container size or depending on the media query I set up ? thanks!

Hi, With timelineLite I have created an animation, then I have a YouTube video that will play on autoPlay via iFrame. I would like to then detect when the video has stopped, and fade-out the video iFrame and continue with another animation... Is there a way to do this ? I also wanted to detect when my browser has reached a certain width, similar to a css media query, and pause or stop the video. Is this also possible ?

This explosion is great! I like the gravity effect when the emitters fall, very useful in my learning how to control the particles !

I did manage to create something of an explosion effect, in case anyone is looking for something like that. It is set to yoyo and repeat, but you can remove those to get a one-time explosion effect -- http://codepen.io/anon/pen/IdALq

I am trying to achieve something like this codePen http://codepen.io/jamiejefferson/pen/soLrF but in a way that the particles only shoot out once, like a mini explosion. Tweaking this code and trying to decipher it hasn't led me to achieve the result I'm looking for... is there a way to simplify this codePen so that it is a single mini explosion with 50 particles ? This would help to understand how to break it down and create particle effects better. Thanks in advance.

yes, this works perfectly! I do see what you mean about having multiple timelines for smaller projects not being necessary. I was using multiple timelines to better organize my animations (giving each splitText sequence for example, it's own timeLine) But I guess there is a better way -- I did collapse everything into one timeline eventually per your suggestion. Can I send you a link to see if I am organizing my timelines and GreenSock JS code in general correctly ? I didn't want to post it here since it uses some of the member plugins, thanks.

thanks, it's starting to make more sense now. The delay and separate timelines were from the larger project, I just pasted a snippet into codePen, so we can ignore those -- but the codePen now only restarts and plays the first timeline once more, and doesn't 'loop' I was looking for the code to reStart and play all timelines in sequence, infinitely, so I am still confused about how to make that happen...

I watched the videos about the position parameter, but I didn't see anything about the repeating multiple timelines. Here is another code pen that shows the onComplete event not working. I am trying to get it to restart timeline 1 after timeline 2 is complete in this codePen http://codepen.io/anon/pen/AyFxu I am not even sure I am nesting these timelines right in this code pen.

I put the first code to infinitely loop, and it works, but it overlaps my other timelines as it is looping and it doesn;t wait for the last timeline to end before restarting. So I tried the onComplete like this var t4 = new TimelineLite({onComplete:function() { tl.restart(); }}); because I want the first timeline to start after the fourth timeline is complete, but it doesn't restart at all. Is there a way to wait for all 4 timelines to finish, and then restart at the first timeline again ?

Hi, I am just trying to get multiple timelines or even one time line to loop using restart(); As you see in the codePen, the timeline just stops, but doesn't loop. This is one timeline of many sequencing timelines, How can we get them to loop after the last timeline has played ?

Hi, I see some demos and examples that create particles from one circular div, but is there something simple that can break down the code for me to understand better -- a simple example that just throws circle particles from a center that has a larger radius than a single pixel ? Maybe a random range about 100x100 pixels from where the particles start from, and a max number of 30 random particles fading randomly from 0 to 100 opacity and scaling from +=200 within a random 500x500 pixel radius area, or something like that ? A simple demo that will help break it down to better understand how to make efficient particles would be very helpful. I have the "Physics2DPlugin.min.js" plugin, but I'm unsure this will help make the particles work after reading through the docs ...

ahh, this is great info. thanks!

I see how to add a delay to a second timeline now, by using this: tl2.delay(4.9); Is this the best approach to use ? And is it the best approach for nesting timelines as well ?

Hi, I have two timelines, but I want one timeline to start after the first timeline, either with a delay or some other way. What is the best way to have multiple timelines and be able to set their start times ?

This is great! But adding other properties like rotation or scale like this seem to cause it not to work randomly: tl2.from(mySplitText.chars, 2, {opacity:0, rotation:180, scale:2}, Math.random() * 1); Is there a way to make each letter fade in, and scale in at different sizes up to 200%, and also tween to position from a different starting x,y position with split text ? I can't seem to find any code or tutorials to explain how to do this.