[Loop not working as expected]

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.

[Loop not working as expected]

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!

[animating css gradients]

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 )
 

[animating css gradients]

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)

[Particles - or "How to assign different start/end values for each class element dynamically"]

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!

 

[Is there something like Timeline.wait(2)?]

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!

[Is there something like Timeline.wait(2)?]

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.

[Is there something like Timeline.wait(2)?]

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

[Is there something like Timeline.wait(2)?]

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.

[CustomEase is not defined - But I imported TweenMax AND EasePack]

Ah... damn. I misread that one sentence. Filthy Kraut not has good englisch sometimes

Mea culpa. All clear and working now. Thanks Carl. 

[CustomEase is not defined - But I imported TweenMax AND EasePack]

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

[CustomEase is not defined - But I imported TweenMax AND EasePack]

Hey folks,

check out the codepen with open console.
Any hints what's wrong?

Thanks

See the Pen yVpJdL by anon (@anon) on CodePen

[Linear gradient problem]

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

[Linear gradient problem]

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.

See the Pen JKrOZr by anon (@anon) on CodePen

[Importing Timeline/TweenLite, but it's not working]

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.

[Importing Timeline/TweenLite, but it's not working]

Hey. Ok, that works. But what about the TimelineMax version? I still can't get it to run without importing TweenMax. Any clues?

See the Pen RWqBOE by anon (@anon) on CodePen

 -> console error

[Importing Timeline/TweenLite, but it's not working]

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

See the Pen meQKxw by anon (@anon) on CodePen

[Why does this ColorProps example not work?]

d'oh?! Thanks...

[Why does this ColorProps example not work?]

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

See the Pen PwbVEJ by anon (@anon) on CodePen

[Stagger Timeline and reverse on event]

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!

 

 

[Stagger Timeline and reverse on event]

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

[Stagger Timeline and reverse on event]

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:

See the Pen tJHDu by anon (@anon) on CodePen

 

The mistake happens, when you roll out of a button and over the same button again. Brain -> knot.

[Stagger Timeline and reverse on event]

Thanks at first..

Codepen here:

See the Pen tJHDu by anon (@anon) on CodePen

On hovering 'btn two', I'd like to reverse the thing from 'btn one'. I hope, you understand me.

 

[Stagger Timeline and reverse on event]

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!

[Subpixels/Anti-Aliasing -> OFF?]

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*