Search the Community
Showing results for tags 'chrome'.
Found 61 results
-
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
-
Hi guys, I have a simple tween that tweens the opacity and scale of an element. It's made up of a number of child divs, some with with background images TweenLite.fromTo(elm, 1, { scale: 0, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); Here's a video showing the problem. https://plus.google.com/photos/117519930315665299724/albums/6016203100500855073/6016203101346895106?pid=6016203101346895106&oid=117519930315665299724&authkey=CNaF7OT_gJGA1QE @0:01 - The above tween is run @0:04 - I run another tween which just returns the scale and opacity to 0 @0:10 - I set the elements display property to none @0:15 - I set the elements display property to block @0:19 - Tween scale and opacity to 0 @0:23 - Tween scale and opacity to 1 So at @0:15 it's rendered correctly. but again @0:23 is not again. I assume this is actually a browser issue, it doesn't think i needs to redraw the element after the scaling. The odd thing is though that if I only ever scale from .5 instead of 0 then there are no rendering issues. TweenLite.fromTo(@elm, 1, { scale: .5, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); (it's all fine on chrome desktop)
-
I made a transition animation in a few boxes in my site and it's making my texts remain in effect blur and blur. Can anyone help me? This is the site: www.krawczuk.com.br / koletivo-creative. Thank you!
-
Chrome isn't very happy with my transition-rich page. When the site is rendered in a large window (>= 1080p maximized) and transitions are initiated, one or more elements temporarily disappear. DEMO (this is early-dev -- layout is far from complete, so please ignore the scaffolding) I've been poring over stackOverflow and the like for possible solutions, but I've yet to run across anyone with this issue. Any clues would be greatly appreciated.
-
Hello.. To those who like to target different browsers, due to the different rendering engines, please keep reading... Opera 18 was released last month (Nov 18, 2013). It is now based on Chromium 31. It looks almost exactly like Google Chrome. And functions way better than previous version of Opera. So if anyone needs a way to target Chromium based browsers like Google Chrome and now Opera 18 and above, the below might help. To target if the browser is Chromium based, use this: // this targets Google Chrome and Opera 18+ var isChromium = window.chrome;if(isChrome === true) { // is chromium based browser } else { // not chromium based browser } To target if the browser is Google Chrome, use this: var isChromium = window.chrome, vendorName = window.navigator.vendor; if(isChromium === true && vendorName === "Google Inc.") { // is Google chrome } else { // not Google chrome } To target if the browser is Opera 18 or above: var isChromium = window.chrome, vendorName = window.navigator.vendor; if(isChromium === true && vendorName === "Opera Software ASA") { // is Opera 18 or above } else { // not Opera 18 or above } There are like 5 other browsers that are Chromium based, but they are not as popular. In that case the window.navigator.vendor should provide the vendor. I hope this helps anyone that might need to target Google Chrome or Opera 18 and above, while you deal with the various different behavior in each browser. Have a great day! -
I just want to throw some knowledge out there to the Green World with something I've been having issues with. I've been struggling with the corner radius not masking any image background or <img> in a <div> using css or a GS tweens. After much searching I finally found a workaround, although I don't really know why it works, lol. In your css If you place this webkit-mask-image it will mask the border. I honestly have no idea what all the goobly text is, but this works like a Harry Potter Magic Wand Spell in all my images without changing anything. DO: .object { overflow: hidden; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } then: TweenMax.to(".object", 0, {borderRadius: "50%"}); OR: .object { overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } If anyone has a simpler solution or explain a better version of this, or knows why this works, let me know.
-
There is a problem with tweens in these conditions(edited): Browser has multiple opened tabs and has worked for about 10-15 min Browser was idle and then used again When I open up more then 3 tabs Code: var tweens = { main_area: { layer_buttons:{ getTween: function (_this, _properties) { return TweenMax.to(_this,0.5, { css: _properties, paused: true, delay: 0.2 }); } } }}var g = tweens.main_area.layer_buttons.getTween;var start = g($(".info", "#information-start"),{opacity: 1});$("#layers").on("mouseenter", "#information-start", function () { start.play(); }).on("mouseleave", "#information-start", function () { start.reverse(); }); Problem:When I do a quick mouseenter from outside of browser or from another or mouseleave, animation doesn't render correctly and I just see end result (without seeing actual animation)Note:I've noticed this behavior only in Chrome so far. I don't know what will be users situation with browser, that's why I want to know is there some kind of workaround for this problem. After completely closing all tabs and restarting chrome browser, all tweens work how they supposed to work. It's not just in this situation, it's with every tween I have on my site.
-
Hi, I just encountered a bug in Chrome (possibly other browsers too) leaving 1px trash during 3d animations, like n the attachment. All you need to do is add 1px border, or box-shadow to the animated element. If you don't want it to be seen - in color of background, or transparent: border: 1px solid rgba(0,0,0,0); border: 1px solid transparent; I hope it'll help someone. John.
-
Hey! First of all, this isn't an animation or tween problem but as there is no other Javascript section, I'm posting it here. Also I'm not entirely sure that it is caused by TweenLite but it is happening in my TweenLite line of code. I have an image and I want to generate a reflection effect for it so I duplicated the image, mirrored it and reduced the opacity through TweenLite (makes it so much easier!). In all browsers I have tested it so far it works fine (including IE7) but in Chrome it's behaving weird. The reflecting image is at the bottom of my page and should partially exceed the bottom border of the DIV it is in. What Chrome does is that the image itself does not go further down than the border of the content div but the canvas or area of the image does go down. This results in clipping the image. This could be an issue with the css I'm applying with the TweenLite line or it could be the way TweenLite handles it. If I comment out the line with where the TweenLite css is set, it gets positioned over the border just fine, but obviously without the right css attributes. Here is the Jsfiddle: http://jsfiddle.net/qTE2m/ here are screenshots of what I mean: Chrome: http://puu.sh/1xI15 FireFox: http://puu.sh/1xI24 The black line at the bottom is the border of the div the image is in.
-
Hey guys, From time to time I get wierd rendering artifacts in Google Chrome when using TweenMax. They only appear in Chrome, so I'm pretty sure its a bug in that particular browser, but I'd really like to get rid of them. Does this only happen to me? Does anyone know a hack to git rid of these artifacts? There's a live demo of the issue here: http://ahrengot.com/...round/tweenmax/ ... Click anywhere to animate the box and see the issue. And here's a screenshot of the artifacts:
-
Hello Rockstarrs, I wrote this dynamic mp3 visualizer almost a year - and it worked wonderfully. Then recently I went back to it and it stutter steps and drops frames. The only things that have changed on my end, Mountain Lion (but i noticed it even before with Lion), FP11.3. So I recompiled the SWF, opened the SWF and everything as fine! Then opened it in the browser - same issue… Uninstalled Flash Player, reset Safari, Chrome, FireFox, repaired disk permissions systemwide, reinstalled Flash - no love. Made sure I had the most current version of GreenSock and swfObject, still nothing better... Attached are screenshots of exactly what I'm talking about, and here's a link to the project live. Let me know if you're seeing everything correctly, or if yours, like mine is slicing and dicing the visual... http://joelhackney.name/spectrum/ Thanks! -Joel
