1DMF

? who knows.. all working now, so all good

No problem, I absolutely love GSAP and hope it helps others.

However, I have just found that the onComplete is firing instantly and not on completion of animation? What am I doing wrong? UPDATE: OK, so if you use parentheses and try to pass in arguments or void, the function fires immediately, so I went back to onCompleteParams and found that they must follow the onComplete special property. In my original example I had the onCompleteParams before the onComplete, which appears not to work. This is now working as desired... TweenLite.fromTo(obj, 1, {height:minHeight+curHeight}, {height:minHeight, onComplete:toggle, onCompleteParams:[obj]});

Well I replaced the anonymous function with a real one and it's working? Though the params don't seem to work, so I've done it like this... TweenLite.fromTo(obj, 1, {height:minHeight+curHeight}, {height:minHeight, onComplete:toggle(obj)}); Regards, 1DMF

Hi, my onComplete doesn't appear to be firing, please can someone advise why. TweenLite.fromTo(obj,1, {height:minHeight+curHeight},{height:minHeight, onCompleteParams:[obj], onComplete:function(obj){obj.toggleClass('active')}}); Thanks 1DMF

Cool, good to know I'm on the right track. I thought I was using a timeline? (var tl = new TimelineLite...) I was considering implementing animation that made parts of the content 'peel' away so to speak. So the bottom caption starts to move then the middle 'content', and then the top title, and then the next item falls into place in reverse order, title, middle content then bottom caption. But I was having difficulty storing all the initial positions, as I do for the current 'li' item. Though the missus said she thinks that might be OTT. I don't want to annoy the user with too much animation, which can easily be done with these cool animation frameworks. What's your thoughts?

Wow thanks, I wasn't expecting that response! So you think I have coded it correctly and I simply need to alter the easing for the animation to follow each other more smoothly, in essence I'm doing it right?

OK, I have put together a demo over the weekend... http://dance-music.org/spotlight_demo/spotlight_demo.html You will see I currently get the original position of the first list element. Then later use that to reset the position of each list element before either sliding out or sliding back in. Also I feel there is a little bit of a delay between the out and in, and guess only if I chain them together will I be able to remove the gap and use the additional argument so the slide coming in starts a millisecond before the other slide leaves the viewport. Playing around I found I needed to make both elements visible before I could then animate them, and it felt a little clunky, hence moving them to two separate phases so to speak (oncomplete). Your input is appreciated. 1DMF

Sorry, I forgot to remove the default auto generated JS! I'll wait till I get home after Friday pool with the lads. The code needs re-writing and is on my Linux devel server at home, I spend a few hours last night refactoring the actual mark-up and need to rewrite the GSAP JS, Once I have some real code I will put a proper demo together, and we can take it from there. I'm very excited about GSAP and the widget I'm building and am looking forward to you guys helping me wrap my head around the problem I currently am having. Which I'm finding hard to explain in simple words. Thanks for the input so far, really has been appreciated. Regards, 1DMF

onclick event handlers are not normally validated when HTML is parsed, only when the button is clicked and the event triggered, is it then interpolated and an error thrown. I could put that code into a normal HTML file, load it and even with the FF web console open it would not throw an error until the button was pressed. This must be some quirk with the way codepen works (or doesn't in this case). As can be proved with this simple example : http://homeloanpartnership.com/codepenbug.html Open it in Firefox with the web developer's 'web console' open, it will not error until the button is clicked.

I know, that's the point of this thread, I don't know how to manage the animation. I could make it animate away, but then how do I get it back? Plus you should only get an error if you click a button, and when I try I don't get an error when it loads nor when I click a button?

http://codepen.io/anon/pen/gEzJw I don't know how to explain it any other way. Hope it helps.

Hi, I am unsure how I construct an animation so that I have a transition out of an li element, but later bring it back in. <ul> <li><div>tab 1 animation elements</li> <li><div>tab 2 animation elements</li> </ul> A standard 'list' built slider panel where the outer ul is position:relative, overflow:hidden, the inner li position:absolute The active 'panel' li element display:block, the rest dislpay:none; I have a button control, when clicked, I want to animate away the elements in the active panel, then animate the desired 'panel' li into the viewport. As they all start in the same position, I thought I could simply animate using timeline.to(y:"-=1000",'my easing') However, after the animation the timeline var is out of scope, so now the animated elements are out of view , how do I bring them back in view? I don't know what their original position was, to do a reverse animation. I was thinking I need to store somewhere the 'panel' elements original positions. to put them back to where they were (hidden), then do a timeline.from(y:-"-=1000",'my easing') to animate them into the viewport. This seems a bit clunky and wondered if there is a better solution or is this the only way , remembering animation element's original position to put them back? Your advice is appreciated. 1DMF

Thanks - appreciated.

got it working with this syntax var tl = new TimelineLite({onComplete:function(){clearActive(active);}});