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);}});

Hi, I've tried this.. var tl = new TimelineLite({onComplete:clearActive(active)}); tl.to(old_title,1,{y:"-=1000", alpha:0, ease:Elastic.easeInOut}); function clearActive(active) { alert("hi"); // remove old active active.removeClass('active'); } I get the alert before the animation runs?

Hi, I have some animation that i want to run, then do some other stuff, but the other stuff is running and so the animation isn't seen? // animate and hide current active item var old_item = $('#'+parent+' li.active ul li' ); var tl = new TimelineLite(); tl.to(old_item,1,{width:"0px",height:"0px", alpha:0, ease:Elastic.easeInOut}); // remove active class and add to new item button $('#'+parent+' li.active').removeClass('active'); $('#'+id).addClass('active'); How do I ensure any JS/JQuery following a timeline tween animation waits for the animation before executing? Thanks, 1DMF.

Hi Carl, Oh I totally agree, FF was being its usual anally standards compliant! It's just unusual to come across something that works in all browsers except FF! Armed with the 'position' requirement and 'would it work with straight CSS', knowledge, it is going to make it much easier from now on. Thanks for everyone's input , much appreciated.

Thanks guys, glad to know I was right and it is an issue with FireFox. I know the page is using <table> for layout, but the splash screen is actually embedded in a much larger page, which I cannot show, it is a corporate members only extranet, and all code cannot and should not be shared. A re-write is currently underway, hence playing with GSAP, looking to replace JQuery UI, where I will also be cleaning up some of the bolted on functionality that has been added over the years. I am also going to DevWeek and looking at knockout.js, so there is much to learn and no time to do it. So yes perhaps someone without dyspraxia could learn codepen in 5 minutes, unfortunately for me, I have other priorities, that take enough time to learn as it is. Interesting that 'y' works and 'top' doesn't, I thought in GSAP they were synonyms? Anyway, I have realised my faux pas, I even called the variable 'ad' for advert, and then assigned the wrong element to it, If you look '#advert' is a div, d'oh! I've updated the test2 , and it works fine using 'top' in all browsers. Thanks for the input, do I assume you can't animate <li> as they are part of <ul> just as <td> is part of <tr> and <table>. I guess what you're trying to tell me is, would it work with straight CSS, if not, then neither will GSAP and that particular CSS attribute.

Hi Jonathan, No, I have major issues with codepen in IE, and it's too complicated for me to just pick up.... This is easier... https://www.homeloanpartnership.com/test2.html Hope it's ok. Clearly shows top doesn't work in FireFox but does in IE, Opera & Chrome. Simply change it to 'y:-800' , https://www.homeloanpartnership.com/test3.html And it works fine in all 4 browsers? Something is definitely amiss? Regards, 1DMF

I changed it to tl.from(ad, 1, {immediateRender:false, top:"-=800px", alpha:0, ease:Power3.easeIn}) Hasn't made any difference? However, changed it to this... tl.from(ad, 1, {y:-800, alpha:0, ease:Power3.easeIn}) And now it is working in all 4 browsers? Is there something wrong with 'top' ? Also any reason why the following animation is so jerky in FireFox and Chrome? var fm = $("#mmr_form"); var lg = $("#mmr_legend"); var sl = $("#mmr_venue"); var sb = $("#mmr_submit"); var ad = $("#Splash_Header"); tl = new TimelineLite(); tl.from(ad, 1, {y:-800, alpha:0, ease:Power3.easeIn}) .from(fm, 0.5, {y:"-=30", rotation:"60deg", ease:Back.easeOut},1) .from(sb, 0.5, {rotation:"360deg", ease:Back.easeOut}) .from(sl, 0.5, {width:"0px", alpha:0 }, "-=0.4") .from(lg, 0.5, {rotation:"-360deg", alpha:.5, ease:Power3.easeIn},"-=0.7"); Regards, 1DMF

Hi, I have the following... tl.from(ad, 1, {top:"-=800px", alpha:0, ease:Power3.easeIn}) noting fancy, just animate for 1 second starting from off screen (-800px), increasing visibility. So the affect is to slowly make visible while sliding in from the top to rest in the middle of the screen. It works in IE, Opera and Chrome, but not in FireFox? FF just shows the apha opacity effect, but doesn't slide in from the top? The element has this CSS... #Splash_Header { background: url('https://mydomain/images/splash/splash_Feb_2014.png') no-repeat; height:600px; width:800px; position:relative; } Your input is appreciated. 1DMF.

Hey Jonathon, Thanks for the info, helps to know the position property requirement for any 'movement' animation using left/top; Re IE11, I know, and I do use <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to try to force the browser to use highest available standards mode as I test and try to write mark-up to latest standards and well formed, don't get it right 100%, but it is my aim. However, I have no control over other people's browsers and the compatibility setting, even MS have IE11 default to all intranet sites running in compatibility mode, which screwed all our internal system because they work properly in normal mode and not in compatibility, as you say it breaks things! The other issue is the industry I am in, the providers / insurers / lenders are always out of date and fail to work on the latest browsers in standards mode, so many users default all websites to run in compatibility mode, which is not very helpful. Clearly putting IE in compatibility mode is not the same as saying pretend you are version XYZ, because I have seen code that runs in IE 7/8/9/10/11 fine, but not in compatibility mode. I have the main animation and display working in all modes, the bit that doesn't in IE11 compatibility mode is a wobble effect on the fieldset and the rotation on the legend... eye candy for those it will work on, and no big deal if it doesn't! Really appreciate everyone's input and support, thank you.

Perfect Jamie, many thanks. I did actually try the 'display' property late last night, but I failed to quote the word 'block', and so was getting errors due to incorrect syntax. Knew it had to be something simple , just couldn't put my finger on it, and was then sent on a bit of a tangent with the 'autoAlpha' setting. Got there in the end

Hey Rodrigo, I'm sorry if you feel I was venting, I wasn't. I have dyspraxia and express myself differently, something I was born with and cannot change, please do not take my posts in the wrong way, as I know I can be blunt (I have been told), it's just how it is which I will have to live with for the rest of my life! Anyhow, I can confirm you forum doesn't work properly in IE11, I just came here from freshly booting my PC, tried to copy/paste the quote nothing happened, put IE11 in compatibility mode, copy/paste is now working. The same with the code box yesterday, it wouldn't close, cancel, nothing, click the button , nothing would happen and as the popup is modal, it trashed the entire page. On to the problem at hand... Little confused you say the element has no position; elements have a default position of 'static' don't they? So are you saying every element I want to animate must be forced to either absolute or relative positioning? If autoAlpha doesn't affect the display property, what can I use to make an element visible with GSAP, or do you have to set the display property before you can see any animation? Lastly any idea why animation would work in FireFox but not IE? , I got the impression cross-browser compatibility was dealt with by GSAP, and so if it works in one browser, it should work in them all. Having done a little investigating, it seems it works in IE11 in normal mode but doesn't in compatibility mode, here is a test page for you to see for yourself. https://www.homeloanpartnership.com/IE11_test.html It does look like there are issues with IE11 and GSAP (including the website), and it seems switching between compatibility mode doesn't help because it fixes one issue but causes another, so you can't win At least I have a better handle on what's happening and why and can work with it to finish the desperately wanted splash screen. The usual scenario, they have known about these new training courses for weeks, then in a desperate panic need a booking splash screen for the members extranet, because the courses start in a week, why is IT always left with the least amount of time to do the most complex part of the job? Oh as an aside, I can't get that codepen link to load, I had trouble with a few of the demos as well, probably IE11 related also! I have no doubt this forum is great, I have had quick, friendly replies to my noobie posts, and that's what makes a forum great, not the fanciness of the GUI, or the amount of pointless, mostly unused features, it's the people who frequent them and the help they give that makes a forum great, and so far I totally agree with you GSAP looks awesome, it has an active , helpful community... functionality is more important than form, a GUI that has form over function is not useful and probably created by M$