romain.gr

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

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

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.

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

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.

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.

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.

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

Hi All, Finally fixed it, http://codepen.io/romaingranai/pen/WRdpdE 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.

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 : http://codepen.io/romaingranai/pen/WRdpdE?editors=1010 Thank you

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?

Hi, Thanks for the quick answers, Here is a simplified Codepen : http://codepen.io/romaingranai/pen/WRdpdE?editors=0010 http://s.codepen.io/romaingranai/debug/WRdpdE/bYMdyYBawOvr Thanks

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