[Stagger a more complex Animation]

Hey Carl,

 

it's exactly that, good job. I'd like to understand why switching from TimelineLite to TimelineMax does the trick?

Another question, are those Pens always available (so then I can check those when I need it), or it's better if I copy them into my own Codepen?

 

Thank you

[Stagger a more complex Animation]

Hi, thanks, I'm going to play around that solution. I have another issue, I think it's related (because of the timing), the problem is that the whole animation needs to be finished to start again. I'd like that each line move to left then right continuously, like a moving flag actually. 

 

We can just focus on the first line, it goes to right then come back to left, what I'd like to achieve is that the line as soon as it came to the original point start straight away to re-animate (right then left) and so on, yes, like a moving flag. 

 

Thank you btw

[Stagger a more complex Animation]

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.

 

See the Pen PEJZbY?editors=0010 by romaingranai (@romaingranai) on CodePen

[Set display:none not working.]

Hi Jonathan, 

 

Thanks for all those details, very well explained, I'll definitely use that little trick with display none

 

[Set display:none not working.]

Hi Mikel,

 

I was thinking that the reset of the animation was 'clashing' with the set display:none, but wasn't able to think further :);

 

It works as expected now. 

 

Thanks a lot.

[Set display:none not working.]

Hi Valente97,

 

Thanks for the info on the onComplete, got it now .

 

To be honest I'm not really convinced about the addClass solution and !important, sure it does the job and I really appreciate that, but it sounds like the last solution in case everything before have been tested. The pen you embedded isn't working, I can't see it, it reloads indefinitely .

 

Thank you.

[Set display:none not working.]

Hi Mikel,

 

Thanks for the quick answer.

 

Unfortunately the 'reverse' option is not a solution to my problem, actually I tried it but my animation is much more complicated than a simple show/hide. I've just reproduce the issue I had in a simpler pen just to show the issue. In my case any css property won't work, so it can be visibility or display or even background-color. I'd like to understand why the line 16 on my code isn't doing anything.

 

About the console.log, I'd like also to understand why the 'onComplete' doesn't trigger after the animation (as it should do) but on page load, it could be any function.

 

Thank you anyway. 

[Set display:none not working.]

Hi, 

 

I've recreated a quick codepen of the issue I have,

 

there is a '.set($list, {display: 'none'})' on line 16, which is not triggering. I've been playing around one full day on that and I can't figure out what's wrong, I'm probably missing something.

 

So to see the first and main issue:

     - Click on the 'Show List' button

          => the list is set to display block then an animation is showing the list items and the title is disappearing,  until here all is fine.

     - Click on the 'Show Title' to re-show the title and hide the list (display:none).

         => the title is showing, the animation on list item is working, but the list isn't going from display:block to display:none. I've also tried clearProps: All (and a lot of other workarounds, in css and/or full javscript, like adding and removing class), it doesn't work either.

 

The second issue:

 

       var showList = new TimelineMax({paused: true, onComplete: console.log('complete')});

 

As you can see the animation is paused at first then triggered later, but the console.log is firing on page load, why? As it set to onComplete it should logically  console.log when the animation is finished.

 

If someone could have a quick look at this, it would be great.

 

Thanks 

 

 

 

 

 

 

 

See the Pen rwGrjv?editors=0010 by romaingranai (@romaingranai) on CodePen

[Reverse Callback : clearProps doesn't work]

Hi All,

 

Finally fixed it,

 

See the Pen WRdpdE by romaingranai (@romaingranai) on CodePen

 

Yep, finally that was my idea also, I'm hiding the nav in css, then set css propertie in .js. Thanks for all the info, was very helpfull and it helps me to dig a bit more into Gsap.

[Reverse Callback : clearProps doesn't work]

Hi, 

 

I would prefer not use "fromTo" but rather "to", with keeping the css as it was (simply because it flashes when setting css rules in javascript). I can't manage to make it works, I still don't know what I'm missing, I'm now using xPercent with to  : 

 

See the Pen WRdpdE?editors=1010 by romaingranai (@romaingranai) on CodePen

 

Thank you

[Reverse Callback : clearProps doesn't work]

Hi Carl,

 

Thanks, but it's partly solving the issue. Actually my problem is when I resize the window, let me explain you how to reproduce the issue :

 

- On Codepen

  - Before doing anything, make the viewport smaller (let's say half/half with the code part).

  - Then click on the "open nav" btn (only once, to open the navigation)

  - Make the viewport wider

  - And click again on the "open nav" btn 

 

You'll see the navigation going back to "translateX:-100%" NOT of it's current width but to -100% of the previous width. Now continue by clicking on the "open nav", and you'll see that the nav is broken. Well it sounds complicated but it's very clear if you try the pen. I thought that removing the css properties would fix the issue, but I made a mistake. 

 

Thanks anyway, if you have any ideas how to fix that? reset the timeline in some way?

[Reverse Callback : clearProps doesn't work]

Hi,

 

Thanks for the quick answers, 

 

Here is a simplified Codepen : 

 

 

See the Pen WRdpdE?editors=0010 by romaingranai (@romaingranai) on CodePen

 

http://s.codepen.io/romaingranai/debug/WRdpdE/bYMdyYBawOvr

 

 

Thanks

[Reverse Callback : clearProps doesn't work]

Hey,
 
I'm struggling with a callback and clearProps, I've tried few options (found here : https://greensock.com/forums/topic/7299-timelinemax-reverse-callback-problem/) and none of the solutions works, I'm probably missing something or I don't get it.

navAnim.reverse(-1).timeScale(1.2).eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"}));

Doesn't work

navAnim.eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"}))
navAnim.reverse(-1).timeScale(1.2);

Doesn't work

function removeProps(){
	navAnim.set(mainNav, {clearProps:"all"});
}

navAnim.eventCallback("onReverseComplete", removeProps());
navAnim.reverse(-1).timeScale(1.2);

Doesn't work

navAnim.set(mainNav, {clearProps:"all"});

Works but no animation (which is logic), so it's not that clearProps doesn't work but the callBack;

navAnim.tweenTo(0, {onComplete: navAnim.set(mainNav, {clearProps:"all"})});
navAnim.reverse(-1).timeScale(1.2);

Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function

function removeProps(){
	navAnim.set(mainNav, {clearProps:"all"});
}

navAnim.tweenTo(0, {onComplete: removeProps()});
navAnim.reverse(-1).timeScale(1.2);

Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function

TweenLite.delayedCall(navAnim.time(), navAnim.set(mainNav, {clearProps:"all"}));
navAnim.reverse(-1).timeScale(1.2);

Doesn't work

function removeProps(){
	navAnim.set(mainNav, {clearProps:"all"});
}

TweenLite.delayedCall(navAnim.time(), removeProps());
navAnim.reverse(-1).timeScale(1.2);

Doesn't work

 

Thanks