Lasercode

As always great help!!! I think most problems really come from wrong usage of mine. I will change the things you mentioned and will get back, if any error persists. Thanks a ton.

Hi guys, this is how i normally created my loops in my banners before gsap3: // ... tl.addCallback(function(){ if(loopCount < 3){ loopCount++; // fade out elements }else{ tl.pause(); } }); Now, that addCallback is not present anymore I use "call()", but the ad does not loop correctly, but only two times. Is "call" not being processed in every loop of the timeline? This would be my whole timeline. Also notice the "tl.to({}, 0.1, {});" in the end, which is needed to avoid a flickering when looping. This was not the case in gsap2 as well. var loopCount = 0; var tl = new TimelineMax({paused:true, repeat:-1}); tl.timeScale(1.2); //fr1 tl.from('#logo', 1, {scale:1.2, opacity: 0 }); tl.to({}, 2, {}); tl.from('.line, .line2', 0.2, { opacity: 0 }); tl.to('.cls-1', 1.2, { 'stroke-width': 102 }); //fr2 tl.from('#bg-blue', 3, {opacity: 0}, 'kaas') tl.from('#stuk1', 0.2, {opacity: 0}, 'kaas'); tl.from('#shop', 0.5, {y: 50, opacity: 0, ease:Back.easeOut},'kaas'); tl.from('#stuk1_shade', 0.2, {opacity: 0}, 'kaas'); tl.from('#stuk2r', 1.3, {x: -72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk2l', 1.3, {x: 72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3r', 1.5, {x: -121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3l', 1.5, {x: 121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stoerer', 0.5, {scale: 0.5, opacity: 0, ease:Back.easeOut}, 'kaas+=1.2'); tl.to({}, 1, {}); tl.to('#stoerer', 0.2, {scale: 0.95, yoyo: true, repeat: 3}); tl.to({}, 2, {}); // loop tl.call(function(){ if(loopCount <= 5){ loopCount++; tl.set('.cls-1', { 'stroke-width': 14 }); tl.set('.line, .line2, #logo', { opacity: 0 }); tl.to('#frame2', 0.5, {opacity: 0}); }else{ tl.pause(); } }); tl.to({}, 0.1, {}); What am I doing wrong? Thanks!

Hey, thanks for the fix. Smart ass comment: I noticed that your initial gradient flips once you hover. Not that important, I admit . But if you wanna fix that too, the error is that you use "to top" in your colorize function, but then use the top param first, and then the bottom one. If you switch them, it's fine and dandy: function colorize(element) { //apply the colors to the element TweenLite.set(element, {backgroundImage:"-webkit-linear-gradient(top," + colors.bottom + ", " + colors.top + ")",background:"linear-gradient(to top," + colors.bottom + ", " + colors.top + ")"}); } (Even less imporant: I am a humble member since '12, but thanks for welcoming me )

Hey, I know this is an old thread, but I came here once before and noticed that Jonathan's linear gradient example is not working for me. The radial one is ok. (Chrome)

Hey there, Title says it. I know I read it somewhere some day... But I cant find what I search, so sorry to open a potential duplicate thread :/ Let's say I got a for loop creating 80 elements, as particles. Now I want them all to have the same starting point, but different end positions/speeds via Math.random() or so. After the "explosion", I would like to move the particles again for some pixels in Z direction, after a break. So: I like to have an explosion, then particles slow down and freeze, then animate again randomly, freeze again, and repeat - always with random positions. Could someone tell be the best dynamic approach with GSAP? I dont know how to handle this right.. And sorry that I can't provide a codepen, it would just be chaos Thanks!

Hey PointC. You got me right Perfect! I marked Carl's answer as the solving one, as it was the right answer to my initial question. However, you helped me a looot! Cheers!

Hey Carl, I see.. While writing a longer text to explain the neccessities, I realized that my way of organizing the timeline is probably just wrong. I am more of a creative than a coder and I got used to use ONE timeline, where I use the position param mainly for keyframe names to define animation "blocks" and add delays inside those blocks (like "start+=0.5" or "state2-=0.3" etc). The "wait" would then make things easier to divide into animations and pauses, if you get my thought. My creative mind makes a difference between times where stuff happens and where nothing happens. And it's way better to read a "wait" in the tween chains. But okay. I can really use blakes prototype function then. If I get things right, the main fault of mine is, that my "blocks" of animations (like former movie clips in Flash) should probably be split into different timeline objects, but I got a question here, just to understand how to do things right: Can I chain timeline objects, and can I make use of the position params in the same manner like in Tweens? Like having tl1 and tl2 being TimelineMax objects and then just chaining them easily to get one whole animation with a break of X seconds in between them? It's not easy to explain for me, so please ask, if something sounds weird. Thanks so much.

Thanks mate. I would strongly recommend adding this to the lib to be honest. It seems like a very small effort for a very high user convenience, and I even used wait functions in flash already. It definitely is something very very common in programming animations. Especially in banner animations. I didnt find a sticky/pinned feature request thread, so could you pass this issue or shall I open a new thread? Cheers

Hey there, if I want a pause of 2 seconds between Tweens in a Timeline, I got used to write tl.to({}, 2, {}); But it feels just not right and I wonder if there is something like tl.wait(2). First I thought "addPause" is what I need, but I believe it wasn't. This must be an everyday issue I assume, so I think I am just dumb and or blind. Thanks for some input.

Ah... damn. I misread that one sentence. Filthy Kraut not has good englisch sometimes Mea culpa. All clear and working now. Thanks Carl.

Thanks for the quick reply. I used custom ease before though, and I knew that I don't need the EasePack. I wanted to try it in addition to see if it changes something, which it didnt. If I remember and got you right, all I need to do is to use the tweenmax import link (for example the one from the download page)? https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js Because that's not working too (locally tested - not in codepen) I also downloaded the bundle now and imported your tweenmax lib locally. No success. Still "CustomEase is not defined".. Could you have a further look please as I think I did not make a mistake.. I think Additionally.. Maybe it's a good idea to add a quick note about it here? http://greensock.com/ease-visualizer Thanks

Hey folks, check out the codepen with open console. Any hints what's wrong? Thanks

Facepalm... Thanks bro. Never would have thought about this..

Hey folks. I got a rather simple problem. Please check out the code pen. Run it and then comment out the JS and comment in the CSS. What do I do wrong? Thanks.

I had some problems with the file you did not mention (TweenMax) and did not know how to get those other smaller libs to work. Now I do. Question solved. Thank you all.

Hey. Ok, that works. But what about the TimelineMax version? I still can't get it to run without importing TweenMax. Any clues? http://codepen.io/anon/pen/RWqBOE -> console error

Hey there, I am pretty sure, someone asked this before and it's explained somewhere. I just don't find it. In the provided codepen, please check the JS imports. It's only TweenLite. Why doesn't it work like this? I tried importing TimelineMax only, too, then added a var tl = new TimelineMax(); Nope... How can I make good use of the smaller libs? Thanks guys, Laser

d'oh?! Thanks...

Hello. I don't get it. It seems so easy but see yourself in the code(pen).. var clr = { pink: 'rgb(0, 0, 0)' }; TweenMax.to(clr, 5, { colorProps:{ pink:'rgb(255,255,255)' }, onUpdate:function(){ console.log(clr.pink); $('body').css('background', clr.pink); } }); Thank you for help. Laser

I take Carl's solution, because I dont need that jquery array flip then. And @Carl, that KITT comment of yours....haha, I need to be fuzzier in future. Thanks a lot everybody!

*push* Is there any way to realise this with TweenMax internal stuff and without setting booleans and write bad code?

Cool idea. Nice plugin. You just had one mistake in your script, because when you set dots.reverse() a second time in the same timeline, it naturally RE-flips the array. So with only one it did the trick, nearly! But then I need to flip it again. So: no flip on original animation, then flip at every animation..hmm... Updated codepen here: http://codepen.io/anon/pen/tJHDu The mistake happens, when you roll out of a button and over the same button again. Brain -> knot.

Thanks at first.. Codepen here: http://codepen.io/anon/pen/tJHDu On hovering 'btn two', I'd like to reverse the thing from 'btn one'. I hope, you understand me.

Hi, I thought this is gonna be easy, but I dont get it working. I got several <li> elements in a row that I put into an array called dots. And I got two hover areas (first and last list item). Those dots are initially being animated like this: var dots = $('.lights li').not(':first').not(':last'); var dotsTL = new TimelineMax({ repeat:-1 }); dotsTL.add( TweenMax.staggerTo( dots, 0.3, {scale:0.1}, 0.05)); dotsTL.add( TweenMax.staggerTo( dots, 0.2, {scale:1}, 0.1)); Now on 'mouseenter' over a hover area, I'd like to reverse the timeline - but I want to let it run infinitely until the user rolls over the other hover area and then again reverse it (to normal so to say). But if I use 'reverse()' then I only get as many animation run-throughs as there are being played 'forwards' and then it stops. It's kind of a Knight Rider K.I.T.T. animation that can be reversed on hovering over one of its head lights How can I achieve this? Thanks a lot!

Hi Jonatron That is very nice of you. Unfortunately I cant just extract the HTML/CSS stuff, as this project is rather large, worked with compass and grunt, many dependencies (and different SCSS files), and I am just the guy for the animations and interactions. So I am very sorry not to be able to provide the needed codepen. Additionally I am under extreme time pressure, which makes it finally impossible. I didnt get the chrome stuff you talked about (after activating the flag), seems interesting though.. I will check out the CSS hints of yours and definetely get back in touch if I get any results. *marked unsolved again*