Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'chrome'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. GSAP Masters, Have come across a situation that you are all more than likely preloaded to fire back a response to explain why. The codepen example above is handled allot different in chrome as it is to firefox or internet explorer (all that I have tested at this stage). I was looking for a way to only transform on one shape but then pattern that render across the whole page as opposed to transforming lots of shapes all together (was killing my cpu). Chrome let me believe I was close to an answer until yeah the other browser checks bummed me out. Looking forward to your response. Cheers, Bundy
  2. I did a quick hourglass spinner using an SVG graphic. It looks great in OSX Chrome and animates just fine. But the positioning seems to be off in Firefox & Safari. Is there a known issue with SVG positioning cross browser? Or possibly with transform-origin? Codepen is here: http://codepen.io/Bangkokian/pen/ZbZmmw (View in Chrome first to see the working version).
  3. Hi all, I am currently working on a little project and i wanted a header with a background and when you hover over this header-div, the background zooms in. However, when I use the camelcase notation in the TweenMax vars, it works fine in Mozilla, but messed up in Chrome, and vice-verse. So 'background-size' works fine on chrome but pretty strange in Mozilla. Hope you can help, thanks in advance! rusty
  4. Hi, This codepen works in IE but not Chrome or Firefox. Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working. Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike... Tested on: Windows 10, IE: 11.0.10240 FF: 41.0.1 Chrome: 45.0.2454.101 m Doing some searching in different codepens i find several pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts. I hope anyone can help out. Kind regards, Math
  5. GreenSock does not render animated SVG symbols properly in Chrome (44.0.2403.155.m) and IE 11.0.21 on Windows 7 SP1 x64. Please have a look at the Codepen example. The animations render properly in Firefox 40.0.2. There is no animated scale in IE and nothing is animated in Chrome.
  6. Hey GSAP People, Ok. SO I'm loving GSAP. But I'm having a little trouble with performance, specifically blur on scale for SVGs in chrome (v43.0.2357 on mac) until fully rendered animation and choppiness in firefox (v38.0.5 on mac). I've read a bunch of stuff and saw a solution in making elements larger initially and then scaling down as needed so the "capture" has better pixelation. I'm working with mostly full width SVGs. So I tried implementing this solution with css svg {width: 500%; height: auto} and then using TweenMax.from's for scale(0.2): My attempt here: scale issue You can see that on scroll there is a huge lag, and then it tries to catch up and essentially skips the above the fold parallax animation. It also creates issues resizing the svg when scrolling back up: But if I ignore the blur issue, and don't enlarge elements and then scale down as needed with tweens, it scrolls just fine here except on firefox. So I looked at lagSmoothing() but am having trouble implementing it and kind of feeling like I must be missing something if the performance is this bad and I need it in animating 20-30 elements. I also tried animating width of the divs wrapping SVGs with SVGs at 100% width and that actually fixed the blur issue in chrome, but created even worse performance issues in firefox. This actually seems like a good solution (codepen example here) except its shaky in webkit? but seemed like it started causing strain getting choppier on scroll when I was animating a series of them because i'm also animating the marginLeft to keep it centered. For main codepen, you can see that I used width on the lowest two divs in codepen but kept scale for upper divs to see the difference. I also feel like I might be putting too much strain with how the animations are updating? Does anyone have any suggestions? Am I implementing the scale down enlarged elements as needed wrong? Thanks for any help anyone might be able to provide.
  7. I'm not sure if it's a bug but the latest Chrome under iOS 8 (old iPad2) behaves different than Safari while swiping/dragging content. Can be something in GSAP as well but guess it's Chrome for now. If you drag/throw a page while your finger leaves the screen the throwprops plugin detects you left and just does what it's supposed to do. Well, that's for iOS Safari, Chrome does the same except if you leave the screen while you swipe to the top and leave screen while swiping over the it's browser bar. If you do so the draggable/throwprops will just stop moving until you drag within the screen again. It's annoying since with my navigation you have to swipe/drag/throw from bottom to top to scroll the site. Works perfectly if you keep you fingers on screen. I made a little page which shows the problem: http://ozboz.nl/dragger/ It's like the browser bar gets the focus or something. Hope someone can give me a fix (or Google for that matter).
  8. Hi! I have a static svg that I add some content to from JS and then I move it a bit in a tween. I have mainly svg texts and svg rect-s with a gradient filled each with. The main idea is to slide the rect and then the texts to their final position. Well this works just fine with Firefox, but Google Chrome fails to move the texts. Although I am able to move texts with jQuery like $('.foo').attr('y', $('.foo').attr('y') + 100); but not with tweenmax. Any thoughts? Regards, Robert
  9. I have a site that lets users drag through a series of pages horizontally. When they reach the end of a series of pages and they drag the container, the edge-resistance kicks in. As they continue to drag against the resistance, the container still moves to the left revealing the background behind. This is how the site is supposed to work. This is how it used to work a few months ago. Now what I see is different. When I drag past the right edge, I can see that the scrollbar is "stretching" indicating the edge-resistance is working. However, the container does not move past the edge. It seems like the transform: translate3d() is not working. I can see the number growing in ie translate3d(-1px, 0px, 0px) -> translate3d(-2px, 0px, 0px). But the container is not moving. Did something change? I first noticed this problem in Firefox, but with the latest version of Draggable, I see it in Chrome, too (it still works in IE). Here is a simplified demo: Codepen URL: http://codepen.io/stephendlei/pen/azQaPb Dragging the first (green) block past the left edge produces the desired result. But moving the last (red) block past the right edge does not. The red block doesn't move and the gray background is not revealed. Note: If I cut down the number of blocks to just 1, the behavior will work as expected. Is there something I'm doing with the inline-blocks that is causing issues?
  10. Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex
  11. So I've been struggling to figure out how to resolve this issue and figured there has to be some kind of resolution to this by now as I've seen people reporting this bug with chrome for years it seems like. I managed to get it working in Firefox and IE, haven't checked anything else. Although Ie has issues with unset SVG Widths and Heights so it seems like I need to setup a backup script to set that on load for IE. But this is driving me nuts. I just want to animate some simple clouds through a background. The only problem is the clouds are using an alpha mask which won't seem to animate. Also this isn't the final animation, I am just trying to get it to work before I spend more time on it. Any help would be greatly appreciated! Thanks.
  12. Hi, I have some issue since the last update with "-webkit-" Not sure this bug has been fixed FIXED problem caused by some Webkit browser reporting redundant/duplicate transform values (in both "transform" and "WebkitTransform") of the computed style which could cause className tweens to act oddly.I make a simple TweenMax.to('element', 1, {className: "+=active"}); and bam ! http://codepen.io/stephanedemotte/pen/bNRXYO Only on Safari and Chrome. Everything good with gsap : 1.15.0
  13. Hi, I have a problem with transformations in Chrome (webkit browsers). I would like to store the states of the elements in CSS classes and tween the elements from one state to other by class names. In the codepen example I rotate the red box three times, with different methods. All of it works perfectly in other browsers, but in Chrome the first tween is scaling instead of rotating. When I inspect the element I can see that in the first tween the browser use the -webkit-transform with a matrix, and the other two tweens use transform, with matrix3d. What's the solution? Thanks for the help!
  14. I came across an unexpected behaviour: apparently Chrome 36 and up supports both prefixed and unprefixed 'transform' property. So, if you set initial transform values on an element (not with GSAP) like so: someElement { -webkit-transform:rotate(30deg); transform:rotate(30deg) } and do TweenMax.set(someElement, {clearProps: 'transforms'}) only the unprefixed version is being cleared and the rotation remains on the element.
  15. I'm using a scale transform, when accelerated using the force3D property the elements are not repainted correct at the end of the animation. I believe this is a chrome/blink bug but I wanted to see if anyone had anything to share on the matter here. The issue can be see here: http://jsbin.com/qehuna Using a non-accelerated tween is fine: http://jsbin.com/sureza Accelerated CSS transitions are fine: http://jsbin.com/fomuno As a workaround I've discovered that adding a small non-accelerated transform after the main tween removes the elements from a composite layer and triggers a repaint: http://jsbin.com/vezaxa This issue is not present in Firefox
  16. Hi Here is the part of my tween that I have problem with : rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule if (scId==1) {var color="#2a2a2a"} else {var color="#f2f2f2"}; if (scId < currentslide) { TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); } and I have this css code : #sctrl table {width: 135px;height: 5px} #sctrl table,tr,td{border:1px solid #f2f2f2;border-collapse:collapse;padding: 0px} @media screen and (min-width: 1358px){ #sctrl {width: 120px;height: 6px;bottom: 25px} #sctrl table {width: 120px;height: 5px} #sctrl td {width: 60px;height: 5px} #sc {width: 60px;height: 6px} } the border color animates fine in chrome but it doesn't work in IE10. the interesting part is if I remove the mediaqueries in the css it will work in IE too. I wonder where is the problem ? the second question is I use multiple tweens at the same time and it's very slow in chrome. I tested in a few computers with chrome and in all of them it was slow. but if I remove this line of animations the speed will be very faster (more than twice): TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); what is your solution ? http://codepen.io/aminfa/pen/lnkCJ
  17. Hi guys, At the moment I'm working on a rotator that rotates between 3 tabs with a 3D perspective (middle tab in the front and 2 on the sides that are in the back). It's all working fine on the platforms and browsers I've tried except for Chrome (both Windows and Mac). The problem there is that one of the side tabs is not rendering on the Z axis while if you inspect it in dev tools the overlay shows the tab in the right position. Here is how it is supposed to look: http://puu.sh/bAamR/98bab7014e.png Here is how it actually looks: http://puu.sh/bAaod/da2a27ac77.png And here is a working demo file I've put online: http://lwigchert.nl/test/demo_issue.html It might be an issue with the z-index because when you play around with that the tabs seem to switch. If there is anything else needed that may help, let me know!
  18. Hi I have a slideshow and it's good in all browsers except in chrome the animations are very laggy and slow and the speed is around 5 fps !! Here is my slider function : function slide() { var rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule if (scId == 1) {var color = "#2a2a2a"} else {var color="#f2f2f2"}; if (scId < currentslide) { TweenMax.to("#sc", 0.9, {left:scId * 45, ease:Power1.easeIn}); TweenMax.to('#slide' + currentslide, 0.9, {left:'100%', ease: Power2.easeInOut}); TweenMax.to('#st' + currentslide, 1.2, {left: '100%', ease: Power2.easeIn}); TweenMax.to('#slide' + scId, 0.9, {left:'0', ease: Power2.easeInOut}); TweenMax.to('#st' + scId, 1.2, {left: '11%', ease: Power2.easeIn,onComplete:defaultslide}); TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn}); TweenMax.to('#sc', 1, {backgroundColor: color, ease: Power2.easeIn}); } else { TweenMax.to("#sc", 1.1, {left:scId * 45, ease:Power1.easeIn}); TweenMax.to('#slide' + currentslide, 1.1, {left: '-100%', ease: Power1.easeInOut}); TweenMax.to('#st' + currentslide, 1.3, {left: '-=100%', ease: Power1.easeIn}); TweenMax.to('#slide' + scId, 1.1, {left: '0', ease: Power1.easeInOut}); TweenMax.to('#st' + scId, 1.3, {left: '-=89%', ease: Power1.easeIn,onComplete:defaultslide}); TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn}); TweenMax.to('#sc', 1, {backgroundColor: color, ease: Power2.easeIn}); } } the #slide is photos and the #st is the slide's text on the photos and #sc is a slide control for switching beetween slides. I recall this function every 6 seconds (except the first time that is 4 seconds) with this code : TweenMax.delayedCall(4, slideauto); function slideauto () { var slider = new TimelineLite(); if (scId==2){ scId=-1; } scId++; slide(); TweenMax.delayedCall(6, slideauto); } at first I thought it might be because of the large photos but it didn't make any change when I replaced the background photos with background color. then I removed this line of my code and the speed a little improved ( like 15 fps) but it's still too slow. TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn}); I want to know how can I optimize my code to run faster and smoother in every browser. Thank you.
  19. davej

    sluggish in chrome

    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
  20. 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)
  21. 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!
  22. 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.
  23. 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!
  24. 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.
  25. 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.