Animation temporarily pausing / getting hung up?

[bburwell 1 Likes (Newbie)]

Hi guys, 

 

I'm running into an issue that I can't seem to sort out and I'm wondering if anyone has bumped into this before. I have a simple staggerTo firing on page load to fade in a grid of thumbnails.

 

Here's the code:

TweenMax.staggerTo('.thumbnail', 3, {alpha:'1', delay:0.2},0.1);

Here's the page:

http://skyline.thisisstatic.com/press.php

 

The fading animation appears to start, then hangup momentarily, and then quickly fast forward through the rest of the animation sequence.

 

It seems like there's a JS or CSS conflict happening somewhere, but for the life of me I can't uncover it. I've disabled all the other JS and CSS on the page as well, but still haven't gotten the animation to run as expected so I'm a bit stumped (I've used GSAP countless times in the past with no trouble).

 

In case it's helpful, I'm using the latest GSAP files and the following plugins:

http://packery.metafizzy.co/

https://github.com/davist11/jQuery-Stickem

 

If anyone has any thoughts on this I'd appreciate it. 

 

Thanks,
Brett

 

 

 

 

[Jonathan 5,176 Likes (Superhero)]

Hello..

 

Im looking at the site in latest Firefox and Chrome on windows 7 and i don't see that behavior... i viewed on Windows XP .. on latest Firefox and latest Chrome and so some delay but not a fast forward through the animation as described.. in Chrome it fades in but real slow..

1. What JS file on this page do you have the GSAP code running from, so we can better debug?
2. Also what browser and OS are you seeing this on?

when i viewed in the net panel in firebug in firefox it would show that there where 28 request but 0 bytes.. any additional info will help to help you.. thanks

[Chrysto 143 Likes (Specialist)]

Hi, 

I had quite a similar problem and then I solved it with images loaded plugin. Basically, what I did was:

 

1) hide initially the divs ( setting autoAlpha to 0),

2) wait the images to load

3) position items ( in your case with packery )

4) fade in the images with some stagger delay

 

and it worked out for me. The problem in my case was that not all images was loaded and this created some flicker... you can try to wait all images to be loaded, and the run the effect. 

 

Ico

[bburwell 1 Likes (Newbie)]

Thanks for the post Jonathan. 

 

1) Here's the link to the GSAP call. The staggerTo is being called after the images have loaded and the packery plugin has initialized. 

http://skyline.thisisstatic.com/assets/js/module.masonry.js

 

2) I'm seeing it on the latest versions of Chrome and Safari on a Mac. I haven't tested it on anything else yet. 

 

Thanks again.

[bburwell 1 Likes (Newbie)]

Thanks for the post Chrysto. That's a good tip. Unfortunately, I'm actually already using the images loaded plugin as part of the packery.js implementation, so it wouldn't be because the images aren't loaded. 

 

But thanks for the tip.

[Jonathan 5,176 Likes (Superhero)]

I noticed that in your init() function your first line has this:

// your using opacity
TweenMax.staggerTo('.thumbnail', 3, {opacity:'1', delay:0.5, overwrite:"all"},0.07);

And then when images are loaded you are using this:

// Once images are loaded, init Packery and fade on images
imagesLoaded(container, function() {
	pckry.layout();
        // and here your using alpha
	TweenMax.staggerTo('.thumbnail', 2, {alpha:'1', delay:0.5, overwrite:"all"},0.1);
});

Is there any reason why you are running this code before the images are loaded and then again inside the imagesLoaded callback?

 

Also your using two different types of properties to animate.. first you try staggerTo opacity to 1 .. and then after images are loaded you try to set alpha to 1

 

Have you tried just commenting out the first staggerTo, and only use the staggerTo in the imagesLoaded callback

 

also what about using autoAlpha:1 instead of opacity or alpha:

var MasonryLayout = {

	// -------------------------------------------------
	// SETUP
	// -------------------------------------------------

	init: function() {
                
                // leave this line commented out
		// TweenMax.staggerTo('.thumbnail', 3, {opacity:'1', delay:0.5, overwrite:"all"},0.07);

		// Bind container and establish settings
		var container = document.querySelector('.masonry-holder');
		var pckry = new Packery( container, {
			itemSelector: '.thumbnail',
			gutter:0,
			rowHeight: '.grid-unit-25'
		});

		// Once images are loaded, init Packery and fade on images
		imagesLoaded(container, function() {
			pckry.layout();
                        // instead of alpha you could use autoAlpha: 1 or use opacity: 1
			TweenMax.staggerTo('.thumbnail', 2, {alpha:'1', delay:0.5, overwrite:"all"},0.1);
		});

		// force window resize to make sure content is centered
		$(window).trigger('resize');
	}
};

• autoAlpha:1 basically sets the opacity to 1 and then sets the visibility to visible or inherit
• autoAlpha:0 basically sets the opacity to 0 and then sets the visibility to hidden

you can learn about autoAlpha here, scroll down and find autoAlpha:

 

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

let us know if that helps

[bburwell 1 Likes (Newbie)]

Thanks for the thorough followup Jonathan. I really appreciate it. 

 

 

The staggerTo in the opening of the init function was cruft from my testing. So you're right, that definitely shouldn't be in there. And I had tried autoAlpha, opacity, and alpha (which explains why the first staggerTo was using opacity)... all with no luck. 

 

Removing the errant link you mentioned helps, but I'm still seeing a hangup in the animation on my end. 

 

Maybe my next step needs to be building a simple test page with nothing loaded by simple CSS and jQuery and GSAP only. Confirm that's working as expected and rebuild from there. 

 

I'm stumped. 

[Jonathan 5,176 Likes (Superhero)]

also keep in mind.. that if you are using imagesloaded.js .. You do not need to include jquery.imagesLoaded.js, as it is included with jquery.masonry.js .. which is described in the link below. check this out in Masony does not fully load in Chrome:

 

https://github.com/desandro/masonry/issues/122

 

im surprised your not using Isotope instead.. made by the same guy who made masonry:

 

http://isotope.metafizzy.co/

 

also others had same issue with masonry and chrome/safari

 

http://stackoverflow.com/questions/7476649/jquery-masonry-breaksstacks-images-in-chrome-safari-but-only-on-first-load

 

yeah this looks more like a masonry or imagesloaded issue on how the images are being loaded.. but not an issue with GSAP...

 

an example will be really helpful.. thx

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

Perhaps you're using the wrong images loaded callback. Try using the "done" callback which triggers once all the images have been loaded or instead of using a stagger method use a to method to animate the opacity of each image when it's loaded.

 

You can check the particular documentation and samples of images loaded here:

http://desandro.github.io/imagesloaded/

 

Best,

Rodrigo.

[GreenSock 8,117 Likes (Superhero)]

Hey Brett. I haven't had a chance to dig into all the 3rd party code, but I did notice that there are errors on the page like "TypeError: 'undefined' is not a function (evaluating 'this.hide()')" and I wonder if there's something else that's trying to control the opacity elsewhere in your code (or the other library you're using). Not a GSAP thing - I mean code in that masonry thing or a jQuery call that's competing with GSAP for control of the same property. I like your idea of isolating things in a separate file so that you can see if it truly is a GSAP-related thing in the simplest way possible. Once we see a simplified example, I'm sure we'll be able to put our heads together and solve this. 

[bburwell 1 Likes (Newbie)]

Hey Jack. 

 

Thanks for the followup. I appreciate it. Sorry for the slow reply. My attention was diverted by some other projects. 

 

I'm not sure when I'll have a chance to dig back into this, but I'll definitely followup if I find anything useful. I remember a similar issue happening before and I wanted to remember it being a CSS related conflict (although, not something immediately obvious). 

 

Anyhow. Hopefully I'll have a more informative followup in a day or so. 

[bburwell 1 Likes (Newbie)]

Quick followup on this. It turns out that the animation conflict was caused by a CSS transition that was being applied on :hover to the same elements TweenMax was trying to transform. 

 

Specifically, here's the offending CSS: 

.thumbnail { 
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out; 
}

At first I was surprised this caused a conflict to be honest. But taking a step back and thinking about it I can see how the GSAP powered changes would cause the CSS transition to kick in, which in turn makes the animation playback / quality go haywire. 

 

Anyhoo. Hopefully this is useful to anyone else that might be bumping up against the same issue. 

 

Thanks again to all for the replies. I appreciate the assistance.