Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
darko

TweenMax from+staggerFrom sequenced = weird result, separate works OK

Recommended Posts

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

Link to post
Share on other sites

Hi darko,

 

Welcome to the forums!

 

The best way to troubleshoot your issues is to have a reduced case example that people can examine. Carl has made a really useful post on how to use codePen just for that.

 

I am not sure exactly what you are doing wrong and am not that much of an expert to know what might be wrong from the top of my head but here are some things I can say:

 

If you are Tweening more than one element, they should be inside an array and separated by commas:

TweenMax.from([".letter_O", ".letter_o"], 1, {delay:1, rotation:22.5});

If you are using staggerFrom, you should provide an array, not a single element:

TweenMax.staggerFrom([item, item, item, item, item], 0.5, {opacity:0, delay:2, cycle:{y:[-200, 200], rotation:[-180, 180]}}, 0.2);

If you are going to sequence something, it will be probably much better to use TimelineLite or TimelineMax. Not delays and TweenMax/Lite.

Your rotation issue, probably comes from where the transform-origin point is. Maybe this will help.

You can pause an timeline and have it wait until the onload event fires or anything else. But since your problem seems to be that you get to see an ordinary "O", why don't you have it all hidden by default and only after everything has completed loading you animate all in?

// style.css
.explodedLogo.letter_O, .explodedLogo.letter_o {
visibility: hidden;
}


// scripts.js
window.onload = function() {

var tl = new TimelineLite({paused:true});

tl.to([".letter_O", "letter_o"], 0.3, {autoAlpha:1})
// more code

tl.play
}

Hope this helps.

  • Like 3
Link to post
Share on other sites

I think your problem is related to immediateRender. Please check out this video...

 

And some of these threads...

http://greensock.com/forums/topic/12851-understanding-the-from-behavior/

http://greensock.com/forums/topic/10637-animating-height-auto/?hl=render#entry54936

http://greensock.com/forums/topic/12059-help-with-simple-stagger/?p=53796

 

And do a forum search for loading fonts because I know it was discussed not too long ago. I think Jonathan can explain it.

  • Like 4
Link to post
Share on other sites
If you are Tweening more than one element, they should be inside an array and separated by commas:

 

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?

 

If you are Tweening more than one element, they should be inside an array and separated by commas:

...

If you are using staggerFrom, you should provide an array, not a single element:

...

 

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 :)

 

If you are going to sequence something, it will be probably much better to use TimelineLite or TimelineMax.

 

And already tried as per my original post - no difference, looks & works exactly the same :(

 

 

why don't you have it all hidden by default and only after everything has completed loading you animate all in?

 

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!

 

------------------------------

 

I think your problem is related to immediateRender. Please check out this video...

 

Hi OSUblake, thanks for this! I will take a look and give it a try. Also, thanks for the links!

 

Regards

Link to post
Share on other sites

Your selector for animating multiple elements is fine. You can use an array, node list, jQuery object. Basically anything that has is array-like and has a length property.

 

From tweens mess everybody up when they start learning GSAP, and things get even more confusing when you use several from tweens in a row. Hopefully that video will clear things up, and show you how and when to use immediateRender.

Link to post
Share on other sites

Hello darko, and Welcome to the GreenSock Forum!

 

For your font loading issue you can still keep your window load event. But also just add your DOM ready event. This way your animation will only run once the DOM is ready and when all assets like links, style-sheets, fonts, and images have been loaded. Sometimes the window event fires before the DOM is ready or vice versa.
 
So try this:

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

  // wait until window is loaded and all images, stylesheets, fonts, and assets
  window.onload = function() {
    
       // GSAP code goes here
    
  };

}); // end DOM ready

x
And like Dipscom suggested adding CSS visibility: hidden to your element that you are fading in. But you would need to use autoAlpha instead of opacity, for better performance and to help with that flash of your letter text.

 

So add this to your stylesheet

#logo .explodedLogo {
    visibility:hidden;
}

x

And then make your tweens use autoAlpha instead of opacity. Read below for info on autoAlpha

 
autoAlpha is part of the GSAP CSSPlugin:
 
http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
    //fade out and set visibility:hidden
    TweenLite.to(element, 2, {autoAlpha:0});
    
    //in 2 seconds, fade back in with visibility:visible
    TweenLite.to(element, 2, {autoAlpha:1, delay:2});
    

x
And also to better help you... we love code we can test and edit live. Since it is really hard to debug your GSAP code on your live site.

 

Here is a nice video tut by GreenSock on how to create a codepen demo example.

 

 

Thank you :)

  • Like 5
Link to post
Share on other sites

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

Link to post
Share on other sites

Ok that explains it why DOM ready and window load did not work. I thought you were using like a Google webfont from a CDN, not using a custom font loaded from your server locally. That will have to be handled differently.

 

if you can setup a codepen demo so we can see your code in context I'm sure we can squash that "O" load flicker-flacker

 

:)

Link to post
Share on other sites

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.




			
		
Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×