clf

Thanks for the clarification. It's definitely deffer to immediateRender. Here is an explanation of that situation. I used legacy method, because had a break with coding, and did not focus on the beauty of the code in gsap3 ? And according to staggers. I want to animate each letter of <div> text that dynamically creating with injecting <span class="letter"> to innerHTML to achive the same result as animate.css do with "pulse animation". So for appearing every letter i have to use stagger. And the pulse each letter separately. But i ran into one problem. If i do something like this function animate(){ letters.forEach((letter,i) => { let t = gsap.to([letter[i],letter_stroke[i]], { duration: 0.5, scale: "random(1,1.05)", repeat:-1, yoyo: true}); }); } and at some moment i replace letters with new created, should i remove\clean every created "tween" for previous letters? let arr = []; function animate(){ letters.forEach((letter,i) => { let t = gsap.to([letter[i],letter_stroke[i], { duration: 0.5, scale: "random(1,1.05)", repeat:-1, yoyo: true}); arr.push(t); } } ... //replace letters .... arr.forEach(t=>t.kill()) //somehow kill previous animate(); Because i feel that i have a memory leak. Or maybe GSAP understands that there is no object in a DOM and kills infinite tweens by itself? Thanks

Hello. Sorry for my dumb question, but why does that code leads to blink the logo at the start moment gsap.timeline() .staggerFromTo(logo, 3, {x:300, opacity:0,}, { x: 0, opacity: 1}) .staggerFromTo(logo, 3, {x:0, opacity:1}, {x:-300, opacity:0 }); but that doesn't gsap.timeline() .staggerFromTo(logo, 3, {x:300, opacity:0}, { x: 0, opacity: 1}) .staggerTo(logo, 3, {x:-300, opacity:0}) #logo has default opacity:0 in css Its' better to see start blink directly in codepen, because in window below that does't happen on rerun Thanks for any advice.

Big thanks. I almost understand 1 and 2nd items, but can you explain why my first example ( where im creating a "new Timelines" on every click) works? Should i avoid such constructions and always create one instance of timeline for one animation sequence? In this example http://codepen.io/clf/pen/oLmGPb?editors=1111 i can't see any collisions, or memory leaks, or performance issues but the dark side i sense in code =)

Hello again. I'v got another stupid question and very ashamed to ask it. I want to create animation exactly like in my attached codepen, but without creating new timeline at every click. I tried something like this var TL1 = new TimelineLite({paused:true}); TL1 .to($("#box"), 2, {y: 200,ease: Bounce.easeOut}) .call(function (newText) {$("#box").text(newText);},["Up"], this, 0.2); var TL2 = new TimelineLite({paused:true}); TL2 .to($("#box"), 2, {y: 0,ease: Cubic.easeInOut}) .call(function (newText) {$("#box").text(newText);},["Down"], this, 0.5); and then $("#box") .click(function () { $(this).toggleClass("register"); if ($(this).hasClass("register")) { TL1.restart(); } else { TL2.restart(); } }); but it didn't work. Of course in that situation the animation begins from the start of timeline 1 or 2, so if i click on the box before the timeline ends it's jumps to the beginning. How can i avoid creating timelines on every click event? Thanks.

Great! Thank you!

I created 2 pens, that approach to solve my problem. Mb somebody will be interested in http://codepen.io/clf/pen/WxPvWg urls inside html container, small JS code http://codepen.io/clf/pen/EyAjWz urls inside css, JS code much bigger. Here divs are created dynamically, but html is cleaner I will be appreciated If it's possible to optimize my tweening code.

Thanks for reply. Thoes gradients i use for example,of course it's very simple create them with css.But what if a button is a complex image, that is difficult to dublicate through css. Just look at for example. In my opinion author placed 4 buttons in the corners with 2 states. When he clicked on one, the led is changing from blue to red but without smooth transition. As i understand from you post, the only way is to put images inside the element, and then change the opacity.

Hello, sorry for my english. I'm stupid noob with gsap and with animation in generally. I want to animate 3 button states, that i'v made in photoshop. I don't want to dublicate those background effects in css, i just want to use 3 different images. For example: <input type="button" id="btn" value="Button"></input> #btn{ background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_5377916_851bff8844.png); width: 197px; height: 78px; border: none; position: relative; transition: background 1s; font-size: 18px; color: white; } #btn:hover{ background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_3098246_d0e3709dbf.png); } #btn:active{ background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_8181429_4fa4a7ed9c.png); } In this case when i move mouse out of the button before animation ends, it returns to normal state with a jump. And when - (mouseIn for >=1 sec), (mouseOut for < 1s), (mouse in) , it also jumps to hover state, without smooth transition. I saw a lot of examples where one image crossfading to another, but they always put one image at front and second at background, and change the opacity. I did the same thing in Flash using greensock - created 1 movie clip with 3 layers each of it contains 1 movie clip with a button state(normal,over,down). So probably solution is to create pseudo button in 1 div with 3 images, and change opacity on mouseIn\Out\Down event. But is it possible to do without 3 elements for each state? Without constructions like: <div> <img class="normal" src="..." /> <img class="over" src="..." /> <img class="down" src="..." /> </div> I really don't understand how to do it with TweenMax. Please help =(