en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en ru en en en en en en en fa en en fr hbs_lat en en en es en en en ms en en en en en en en en en en en en en fi en en en en en en en en en en en en en en de en en en en en en en en en en en ca en en en en en en en en en ca en en en en en en en en en en en en en en en en en en en ca en en en en en en en en en en tr en en en en en en en en en nl en en es fr en en en en en en en fr en en en en en en ru en nb en ru en fr en en en en en sv ru en nb en ru en ru en en en en en en en en en ru en en en en en en en ru en en en en en en en nb en en en ru en en en en en en ru ms en en en en en lv nl nb en lv nl en ru en en en en en en en nb en en en ru ru en en en en en en en ru ca nb en ru ca ceb en en en en en en fr nb en en fr en en en ru uk en en en en en fr en nb en fr en ru en en en en en ro ru nb en ro ru en en hbs_lat lv en en en en en ca en nb en ca en en ru en en en en en en hbs_lat fr nb en hbs_lat fr en ru en en en en en fi ru en en en en en en ru nb en en ru en en en en en en sv ru nb en sv ru hbs_lat en en en en en en en ru nb en en ru en en en en en fr ceb en en en en es en en en en en hu en fr en en en nl en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Best compression for your banner assets
Christoph Erdmann posted a topic in Banner Animation
three.js Amazing PNG Effect! Which Plugins do I need?
Anna-Sophia posted a topic in GSAP
Animate a large sequence of png's
Hi Guys, I have a bit of a conundrum so I thought I would put it past the experts! I have a video sequence that has been exported as 300+ png's, some coming in at 300kb. I'm looking for the most optimised method to animate the sequence. I'm already using GSAP in this project however I'm not sure it would be best suited. I was thinking an image replacement method but its an awful lot of calls and combining them into a sprite will create a huge file. Thanks Wes
Black outline around PNGs on IE 11 (and below) Urgent
sorciereus posted a topic in GSAP
Hello. I always use GSAP for my banner animation - and today (of course when we are up against a crazy deadline) all of our banners that are tweening transparent png's are showing a black outline around the pngs. It's strange because I've seen this bug with IE8 (which we don't support) but only when the images have a drop shadow, the drop shadow becomes solid. I've never seen this before and seems to be affecting all of our units that I've used transparent pngs on in the past. Is there something going on with the platform? This error is in all versions of IE. I'm calling TweenMax from: https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js Any fixes? Any ideas why this is happening? There are not drop shadows on these pngs. Here is an example line of code that is moving the pngs around TweenMax.to('#clouds3', 2.2, {alpha:0, x:"+=300", y:"-=140", ease:Power1.easeIn, delay:.5});
IE8 tweening a png - black outline fix?
sorciereus posted a topic in GSAP
Hi there - I have an animation using tweenlite to tween some divs that contain png w transparent backgrounds. This looks great in all browsers expect IE8 there are blackout lines around the pngs. I know there are fixes for jquery fades and whatnot in IE8 for transparent PNGs, however none of the ones i've tried work on my file. Here is the timelinelite doing the tweening: var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ; and here is the css #lens_flare1 { opacity:0; position:absolute; left:22px; top:5px; background:transparent url('images/lens_flare.gif') no-repeat; width:59px; height:53px; } #lens_flare2 { opacity:0; position:absolute; left:73px; top:10px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } #lens_flare4 { opacity:0; position:absolute; left:233px; top:50px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } Any tricks for this? Apologies for not posting to Codepen but have super limited time at the moment to get setup on that - Any help is greatly appreciated. ~julia
Placing PNG Graphic Overlay Within SVG Element
jedi posted a topic in GSAP
hi, i have made in this draggable rotating Throwprops star test file in the codepen. i wonder if it is possible to put a star shaped graphic (a PNG with transparent background) overtop of the star shape while maintaining the star as the SVG trigger element.
Color fill only the visible part of transparent PNG
Jonah posted a topic in GSAP
Is there a way to only color fill the visible parts of a transparent png? I feel like this is something I've either done with GSAP or back in the day with AS3, could be mistaken though, it's been awhile. Thanks for any help!
fl.Ash posted a topic in Loading (Flash)
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.
davej posted a topic in GSAP
Hi All I have a pretty basic animation. a couple of png some scale up and some rotate. They are on the larger size. The animation works great in every browser but chrome. It is supper sluggish to the point its unusable. http://clients.rubberduckyinteractive.com/cmp/animationtest.html. Any help or suggestions would be great. Is there a better way to achieve this set of animation effects with out using such large png. It does need to be responsive. Thanks for any help in advance
Png transparency goes black when rotating div in IE8
marcusfriberg posted a topic in GSAP
Hi guys, I am animating a div with a transparent background (the ball). When I use rotation the transparent background seems to get a black background in IE8. This only appears when I use css rotation in my animation. Is there someone who have seen this before and knows how to get rid of this problem? Is it possible to use rotation in any other way than css? This is what my animation looks like; tlBall.to(ball, 0.2, {css:{left:"400px",top:"366px",rotation:360}, delay:0, ease:Sine.easeInOut}) This is that the background with the ball looks like; http://cl.ly/image/1U2a0w0T3O17/image004.png Thanks! - Marcus
jlo posted a topic in GSAP
Alright, another question Greensock Guys... Was having a look at the Served ping-pong site the other day, have a look at it here: http://www.served-mcr.com/ Great site, loving the animation in it. Noticed they're using TweenMax and Scrollorama among other scripts, nice. I was interested in the tiny background animations they've included. I created something very similar a while ago with CSS Animations and Keyframes, and in the spirit of cross-browser compatibility I wanted to recreate it with JS. I've been hearing more and more lately about animated PNG's using this method (as opposed to an Animated PNG, or Firefox's APNG). I get how they're using setInterval to call an individual .png file every x second to create the illusion of an animation, which is pretty cool, and a huge time/file-size saver when compared to say using .gif's, but I haven't been brave enough yet to try and create something similar with the GSAP. If any of you guys have the time could I ask for any suggestions or examples of how this might be done with Greensock? I've included some makeshift assets for you to use, just five images of squiggly lines you could use to trigger through, if that makes it easier Appreciate any help you boys have. Cheers
Animating alpha PNGs in IE8
digitaldavenyc posted a topic in GSAP
I'm having an issue with Animating alpha PNGs in TweenMax JS in IE8, there is a lot of distortion during the animation but after it is complete the PNGs return to a normal state. I know IE8 inherently has issues with PNGs but is there a work around for this in TweenMax?
Tweening autoAlpha creates gray background on PNG24 image
antoniobrandao posted a topic in GSAP
Hello, I'm tweening the autoAlpha of a PNG24 image, but a gray background is appearing around it, in the area that should be transparent. I set it's "visibility:hidden" in the CSS. Then I use Javascript to find out if it's visible in the browser while scrolling. When it is in the viewable area, I tween it to autoAlpha = 1, and in the end of the tween I remove the listener. Basically, this is to implement the effect of showing images only when the user scrolls down to them. But strangely, that gray background is being created. Am I doing something wrong? Is there a technique to prevent this? I attached the troublesome image to this post so you can see it. Thanks
Loading PNG files that are without a file extension
creatify posted a topic in Loading (Flash)
Before I dig too deep, I'm hoping someone can direct me on how to modify LoaderMax to allow it to load PNG files that happen to not have the file extension .png. The files are under our control and are of the known type PNG, however, for various reasons, the file names do not contain a file extension in their names. Thanks!
PNG Transparency in IE
bob_dobbalina posted a topic in GSAP
I'm rotating and tweening the top and left positions of several img elements (transparent .pngs of rounded rectangles that have a slight drop shadow). Everything is working perfectly in all browsers except IE(7&8) renders the "dropshadow" area of the pngs as a solid black. I've tried several hacks like: http://snipplr.com/v...deview&id=46458 and http://snipplr.com/view/7903 but nothing seems to work. It's notable to mention that if I remove the rotation from the elements, they render fine in IE. Any help would be greatly appreciated! PS - Thank you so much for porting this library to JS!!!
Loadermax transparent png bg click-through?
Jonah posted a topic in Loading (Flash)
If I use LoaderMax to load pngs with transparent backgrounds and add mouse event listeners to the pngs, will the listeners respond when the mouse is over the transparent portion of the png? If so, is there a way to change this so that the mouse events only dispatch when hovering over opaque portions of the png? Thank you
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream.”
“GSAP IS the animation library and has been for years. If you're gonna learn one - this is it.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.