bburwell

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.

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.

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.

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.

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.

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

Howdy Jack, I'm running into a similar Safari "plug-in canceled" error that has popped up in the forum a few times. I understand that the solution is to set auditSize to "false" and manually define the estimated bytes. I'm just not sure where to define auditSize within my code. Here's the gist of what I have. First I load in an XML file: xmlLoader = new XMLLoader("../xml/"+photogID+"_flash.xml", {name:"xmlDoc"+photogNumber, onInit:onXMLLoaderComplete, integrateProgress:false, auditSize:false, estimatedBytes:200}); Within that XML file are several LoaderMax instances each holding a list of ImageLoaders: ... As the user navigates through the subsection related to the XML document, I call up the related LoaderMax instance within the XML and begin loading assets: loaderCurrent=xmlLoader.getLoader(XML_photo.navigation_left.btn.sectionID[sectionNum]) as LoaderMax; The loaderCurrent has already been defined as a LoaderMax instance: var loaderCurrent:LoaderMax; I'm fairly certain that I need to set auditSize=false for loaderCurrent. I'm just not sure how to go about doing that (or even if that's indeed what I should be doing to begin with). I tried the following with no luck: var loaderCurrent:LoaderMax = new LoaderMax({name:"loaderCurrent", defaultAuditSize:false}); Do you have any thoughts on what I might be doing wrong? The site is running beautifully thanks to this rocking class of yours, I just can't seem to squish that last little bug. Any thoughts would be greatly appreciated. Thanks dude.

Perfection. Thanks Jack.

Thanks for the quick reply. I'm running all my files locally, so there isn't any cross domain loading happening. I tried to cast as a DisplayObject with no luck. When I trace(LoaderMax.getContent("photo1")); it returns "undefined." Is there a flaw in the way I'm attempting to prioritize a specific image in the queue and add to the display list upon loading completion? (p.s.I realize the progress handler is functionally anemic right now, but as far as I understand things it should properly alert me once my image is loaded) function prioritizePhoto():void { this.imageLoader = LoaderMax.getLoader("photo"+nextPortPhoto) as ImageLoader; this.imageLoader.prioritize(); this.imageLoader.addEventListener(ProgressEvent.PROGRESS, photoProgressHandler, false, 0, true); } function photoProgressHandler(event:ProgressEvent):void { if(event.bytesLoaded == event.bytesTotal){ showPhoto(); } }

Howdy Jack. I have a feeling I'm misusing the class, but for the life of me I can't figure out where or why. I'm loading in an XML file and several images within the XML using , which seems to be working just fine: function loadPhotoXML(photoID):void { //Activate ImageLoader so that the XMLLoader can recognize them. LoaderMax.activate([imageLoader]); // create loader + start loading xmlLoader = new XMLLoader("../xml/hamilton.xml", {name:"xmlDoc", onInit:buildPortfolio}); xmlLoader.load(); } My goal is to use this to build a loading queue that immediately starts loading all the photos silently in the background where they'll be stored until I need to display them (you know... basically exactly what you created this for). When I need to add a specific photo to the display list I first check to see if the file I'm looking for is loaded: // check to see if image is loaded before trying to add to stage this.imageLoader = LoaderMax.getLoader("photo"+nextPortPhoto) as ImageLoader; if (this.imageLoader.status == 2) { showPhoto(); } else { prioritizePhoto(); } If the image is loaded I call showPhoto() where I add the image to the display list (below). If the image isn't loaded I call prioritizePhoto() (which prioritizes that photo in the queue, tracks the loading, and calls showPhoto() once it's fully downloaded). function showPhoto():void { // retreive photo and add to stage var subloadedImage:Bitmap = xmlLoader.getContent("photo1"); photo_HOLDER.addChild(subloadedImage); } function prioritizePhoto():void { this.imageLoader = LoaderMax.getLoader("photo"+nextPortPhoto) as ImageLoader; this.imageLoader.prioritize(); this.imageLoader.addEventListener(ProgressEvent.PROGRESS, photoProgressHandler, false, 0, true); } function photoProgressHandler(event:ProgressEvent):void { if(event.bytesLoaded == event.bytesTotal){ showPhoto(); } } Things seems to be getting fouled up in the showPhoto function. For some reason "xmlLoader.getContent("photo1");" keeps returning a value of undefined. The thing that is strange to me is that if I trace "xmlLoader.getLoader("photo1");" it returns "LoaderItem 'photo1' (url:../images/hamilton/food_1.jpg)." Why would the getContent return undefined and getLoader return a value? I suspect it's because the content/photo I'm trying to get isn't actually loaded, but I don't know why that would be. I've poured through your documentation and examples, but for the life of me can't solve this. Sorry to bother you with what I'm almost certain isn't a bug report, but if you can shed any light on this for me I'd really appreciate it. p.s. Despite my early stumbles, I can already tell this is going to be an amazingly useful tool. Kudos dude.