darko

Hi Jonathan, will do edit: Well, maybe I will pass the codepen adventure for now. I have to code a lot of things and I am not really a fan of those platforms. Since removing the DOM part solved the issue with compatibility, I will leave that at that. Have so many tasks this week, and this is my side project doing in spare time. Thanks, Regards

And a follow-up: Well, I just remembered why I generally do not like to apply opacity and visibility to 0/hidden: compatibility with IE8 and older browsers, Opera Mini and so on. The trouble is document.addEventListener("DOMContentLoaded", function(event) is not running in IE8 and lower, and I must maintain IE8 compatibility for now. Also, if animation fails in some other XYZ browser for whatever reason, the entire logo part (ouch!) will be invisible. Solution is, of course, to use modernizr, but I also like to keep things as simple as possible. Oh, well - back to square one update #1: removing DOM wrapper part and leaving onload only solves "the IE8", at least update #2: and - amazingly - it works in Opera Mini extreme mode, wow, did not expected that update #3: actually, it is not onload that causes the issue in Firefox, it happens even without it, but when I set delay to 0, I can notice for a blink that ordinary replacement font "O" is shown. It seems like a Firefox bug, definitely.

Hi Jonathan, thanks for your impressive post! I will study all that you wrote in the upcomming days, but for now can report this from brief tests: 1. wrapping both in DOM and onload only did not help, it produced the same result as just with onload only btw. here is that example: http://i.imgur.com/v7VSkXr.gifv I forgot to mention that the above with ordinary "O" happens only with the very first visit, every other page refresh, even in dev console with caching disabled, does not reproduce it. Firefox really must run in private mode to emulate true first time visit, because of custom font files. 2. However, applying visibility, combined with alphaOpacity did the trick, eliminating the font bug with Firefox, at least now with onload and DOM wrappers I can put delay out of play. I will definitely try other suggestions and try to master it, will report later the results, but from the above it should work now. Thanks again, Johnatan & OSUblake ! Regards Darko P.S. I have enabled in my profile email notifications immediately upon registration, but so far I have received none. Nothing in spam folder, either. Are notifications enabled site-wide? Thanks

Hi Dipscom, yes, I know this part and also tried several different things, but no results. The key issue for me now is why the .from (or .to) animation -- when combined -- gets weird? Well, honestly, I am not sure about this. I mean, it is a common selector for all elements, and looking at some video demos, this is exactly how the GSAP team is doing it. explodedLogo is common to each, letter_X is specific to each. I mean, I highly doubt and would be really surprised that the selectors are key issue here And already tried as per my original post - no difference, looks & works exactly the same Thanks, I will try this, possibly it did not work because I used opacity instead, which over-rides tweens [ Why? Can it be set differently? ] Thanks for you help! ------------------------------ Hi OSUblake, thanks for this! I will take a look and give it a try. Also, thanks for the links! Regards

Hi GSAP team! I have discovered your GreenSock.js few days ago and really got impressed - nice work! And I have started playing with simple TweenMax from & staggerFrom examples, but along the way got some strange results. ---------------------------------------------------------------------------------------------------------- So, here is my basic work so far: EXAMPLE 1: TweenMax.from(".explodedLogo.letter_O, .explodedLogo.letter_o", 1, {delay:1, rotation:22.5}); RESULT: http://i.imgur.com/s5BT3SD.gifv EXAMPLE 2: TweenMax.staggerFrom(".explodedLogo", 0.5, {opacity:0, delay:2, cycle:{y:[-200, 200], rotation:[-180, 180]}}, 0.2); RESULT: http://i.imgur.com/RUjryaG.gifv EXAMPLE 3: COMBINED TweenMax.staggerFrom(".explodedLogo", 0.5, {opacity:0, delay:2, cycle:{y:[-200, 200], rotation:[-180, 180]}}, 0.2); TweenMax.from(".explodedLogo.letter_O, .explodedLogo.letter_o", 1, {delay:6, rotation:22.5}); RESULT: http://i.imgur.com/Os0G4EF.gifv Sorry animated gifs are - ironically - not allowed in the editor So, when I try to combine those two in a sequence, the rotation in .from get distorted position. Why does this happen? I have also tried with a timeline sequencing, the problem remains the same. Is this a bug or am I doing something wrong here? ---------------------------------------------------------------------------------------------------------- Also, I have discovered that CSS (and CSS animation) always precedes tweens, which means that if I set opacity to 0 in my CSS regardless of the animation opacity levels, entire element will be invisible. Is this by design? Can this be over-ridden so that animation takes over CSS somehow? ---------------------------------------------------------------------------------------------------------- Final question - How do we control the moment our animation is going to start? I am targeting the page load/rendering here, specifically. I have discovered that many times, when page does not load+render completely, the animation already starts executing in the background, which means that user may never see it happening. Once the rendering of the page completes, all it will see is just finished animation (e.g. last frame) as if it never happened. I tried to solve this with: window.onload = function() {} But, this created at least one problem: as you can see from the animated GIFs, I use a custom font. However, with onload wrapper in Mozilla Firefox, the animation displayed an ordinary letter "O" for a split of a second upon initial page load/render, than removed it, and only afterwards the animation got executed as it should. This was not happening in Chrome and other browsers that I have tried. So, again, that is undesired behaviour, possibly a bug in Firefox, but I really want smooth and universal solution that will work. So, I removed this method and reverted to the good old delay. By the way, the website is here, so you can see the basic version I currently use. ---------------------------------------------------------------------------------------------------------- I know I probably ask a lot in my first opening post, but I really appreciate your help Thanks, Regards