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