Search the Community

Hi, I just want to introduce Compress-Or-Die which is an online compression tool especially created for the creators of banners... so I hope for the most of you. It isn't a tool like tinyjpg or jpegmini that just allows to shrink existing JPGs a little bit. It's the one that creates your (also low quality) images from your original data and really squeezes out the last byte. And allows things like JPGs with transparency and "Selective quality" (as known from Adobe Fireworks) btw... Take a look at it here: http://compress-or-die.com/ In this context these articles could be interesting that explain a lot of the options you can set: http://compress-or-die.com/Understanding-JPG http://compress-or-die.com/Understanding-PNG I am the author of the tool and the article. So if you have questions, wishes or something else, just drop me a line. Thanks, Christoph

Hi guys. I'm a newbie to the forums and would like some help with changing (or disabling) animations to static images whilst in responsive mode. I am currently in the process of finding a web host for my work so examples will be quite bleak, but should be up shortly. Any help would be greatly appreciated. M

Hello GreenSocks! I've been working with gsap for a short while. But this is my first problem with which I can not get any further. So my first thread Hello!! My Goal is: to animate multiple Images to a Video. For this I found already a snippet (dont now the url anymore) which displays and hide immediately a image (Combined with a staggerTo). So my Problem is: It works! But not on all Browsers. If i clean the Cache or hit reload, over and over, the animation in Internet Explorer and Edge is very very flashy! My Question is: What went wrong?

I want to create a diagonal mask between 2 images. So from a diagonal line the other image pops up. See attached image as example. The "taste/12" logo is the first image. Then the second image has to be shown starting from the center diagonal towards the edges. Is this possible with GSAP?

Hi, I created a project using GSAP TimelineMax Plugin where the text on the left side slides in the original position from the left (kind of like fade in). var timeline = new TimelineMax(); timeline.from(".main-text-home-cta h2", 1, {x:-100, opacity:0},0) .from(".main-text-home-cta h4", 1, {x:-100, opacity:0},0) .from(".buttons-under-nested-rows", 1, {x:-100, opacity:0},0) .from(".devices-chat-picture", 1, {x:100, opacity:0}); The code above the code i used and added near the </body> tag and the TimelineMax and TweenMax JS files above the code. The problem i am facing is that when the page loads the text appears on the screen in its original position (the position it will after the animation completes) for few seconds (or till the time the page is loading) without animation and as soon as the page load is completed the animation starts. So I want to know whether this a problem with GSAP Plugin or I am doing something wrong. And also I want to know how to fix this so that while the page load nothinng will be shown in the view and after the page loads the animation will start. One more problem that I faced is that when the animation starts after the page load it is very slow and laggy (again I don't kow whose problem is this). Thanks.

Hello guys, This is my first time using LoaderMax to load assets as I usually use the Starling asset manager however I am working on a standard flash application now and have had good experiences with TweenMax and TweenLite so thank you for providing these awesome tools! I am trying to load multiple images (pngs + jpegs) using the ImageLoader. It is working fine but I am looking for a way to be able to not add the images to the screen as soon as they are loaded and make them accessible to child sprites that I can't specify in the container parameter (These sprites are different screens which are created and destroyed as needed and do not exist at the time of loading). So basically, what is the best way to make these images accessible throught my application and not just in the class they are loaded in (this class is still a parent of all the sprites I will need to use these images in). Regards, Ash.

On GreenSock's home page, part of the animation at the top is the different browser logos (Safari/Chrome etc) spinning from one into another. I want to do exactly that with a set of photos. Does anyone have an example of the code to do this?

Hi, I'm having troubles when resizing images inside a div on IE7/8, working fine on other browsers. I've got a wrapper div with a background and containing several images, you can zoom the wrapper and all the images inside will scale accordingly. Well, this zoom effect when in IE7/8 is not working properly, when I zoom the wrapper the content is not scaling (always 100%) but the background is zooming in and out correctly. This is the structure: <div id="wrapper"> <a href="">image1</div> <a href="">image2</div> <a href="">image3</div> ... </div> Thanks in advance.

hi, thank you for this great and useful tool. my xml: <data> <ImageLoader name="digital_01" url="imgs/digital_01.jpg" centerRegistration="true" width="640" height="400" twx="342" twy="391" kw="230" kh="200" load="true"/> <ImageLoader name="digital_02" url="imgs/digital_02.jpg" centerRegistration="true" width="734" height="400" twx="594" twy="389" kw="215" kh="192" load="true"/> </data> as3: var queue_xml:XMLLoader = new XMLLoader("imgs/digitals.xml", {name:"digitalsXML", maxConnections:1, estimatedBytes:5000, onChildComplete:imageCompleteHandler, onComplete:queueCompleteHandler}); queue_xml.load(); var img_xml:XML = new XML; function imageCompleteHandler(event:LoaderEvent):void { addChild(event.target.content as ContentDisplay); img_xml = LoaderMax.getLoader(event.target.name).vars.rawXML; //i want to scale down images for using them as thumbnails too TweenMax.to(event.target.content, 0, {autoAlpha:0.2, blurFilter:{blurX:5, blurY:5}, width:img_xml.@kw, height:img_xml.@kh, x:img_xml.@twx, y:img_xml.@twy}); trace("original image value:"+ img_xml.@width +", xml thumbnail size(kw) value:"+ img_xml.@kw +", current image value:"+ event.target.content.width); // trace result for first //original image value:640, xml thumbnail size(kw) value:230, current image value:820 //trace result for second //original image value:734, xml thumbnail size(kw) value:215, current image value:1095 } function queueCompleteHandler(event:LoaderEvent):void { } problem: my images bigger than its actual size but i want them smaller. when i set kw or kh to negative values, result is what i want. btw this is my first project with greensock tools.

So, I'm creating an Image Gallery. Clicking on buttons calls the "change_section" function, passing it the hires image id. I want to fade out the current image, load the new image, than fade it on the screen. But, for some reason when it losing track of the "this.hires" array that contains the image url, width, height and id. I think it's calling an undefined "Gallery" javascript object. Any insight would be appreciated. Gallery.prototype.change_section = function(_id) { this.new_section = _id; //// Started with TweenMax.to(this, .5, {hires_alpha:0, overwrite:2, onUpdate:reDrawMain, onComplete:this.check_hires}); ///I've tried this var obj = this; TweenMax.to(obj, .5, {hires_alpha:0, overwrite:2, onUpdate:reDrawMain, onComplete:obj.check_hires}); /// Calling just this works, and still sees the "this.hires" array in the Gallery object. So, I don't think it's my logic, but rather I'm not referencing the right javascript object with the onComplete call. this.check_hires(); }; Gallery.prototype.check_hires = function() { var i; for (i=0;i<this.hires.length;i++) { if(this.hires[i].id == this.new_section) { if(!this.hires[i].loaded && !this.hires[i].loading) { this.load_hires(); } else { this.active_section = this.new_section; this.open_hires(); } } } }; The code below is for reference. Maybe I have conflicting calls to TweenMax or something. Gallery.prototype.open_hires = function() { TweenLite.to(this, .5, {delay:.5, hires_alpha:1, overwrite:2, onUpdate:reDrawMain}); }; Gallery.prototype.load_hires = function() { trace("Gallery load_img") var obj = this; var i; var s; for (i=0;i<this.hires.length;i++) { if(this.hires[i].id == this.new_section) { var hires_img = new Image(); this.hires[i].obj = hires_img; hires_img.id = this.hires[i].id; hires_img.onload = function () { obj.hires_loaded(this.id); } this.hires[i].loading = true; hires_img.src = this.hires[i].img; } } }; Gallery.prototype.hires_loaded = function(_id) { var i; for (i=0;i<this.hires.length;i++) { if(this.hires[i].id == _id) { this.hires[i].loaded = true; this.active_section = _id; this.open_hires(); } } };