Jump to content
GreenSock

Search the Community

Showing results for tags 'firefox'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi can anyone please help me find what is wrong with this animation, it works very well in chrome and IE but very slow and jerky n firefox. thanks Jas
  2. Hello there, after wasted hours of google searching, i will try to find help here: I just started with GSAP and i absolutely love it. But there are two problems which only appear on firefox: I'll post this link as well, because i dont think it's clearly visible in codepen: http://markmaurer.de/tween/ Problem 1: The animation is REALLY laggy and unsmooth in FF. It looks weird... Problem 2 (not visible on codepen): Text rendering, aliasing, smoothing or whatever changes after the animation is finished. Looks also weird? Everything works smooth on this page: http://www.riiotlabs.com/... So it should be possible to do smooth animations on FF. I've tried almost everything i could find in google but nothing worked. What am i doing wrong? Thank's a lot in advance for any help! Kind regards Mark
  3. I just noticed, one of our Flash games has a really awful jitter in all the GSAP tweens -- but only in Firefox. 'Looks 100% fine in Chrome and Safari. Anyone else seen anything like this? https://mindgamer.com/brain_training_paperboat_challenge/ (View in Firefox to see the issue).
  4. Hello everybody I'm working on a media gallery that uses Draggable ('rotation') to navigate. It is has many dependencies. Therefore it's hard to reproduce a simple codepen version. But perhaps the problem rings any bells here: Firefox refuses to handle clicks/touches correctly inside the Draggable and its sub-elements. It is ONLY FIREFOX - on all platforms. I never thought I would ever say this but: “Even IE works fine!”. My desired Draggable settings are: a. dragClickables:true, b. allowEventDefault:false, I get a <button> element work when I change a or b or both. Whereas <button data-clickable =”true”> does not help at all. Whatever I do, the controls of a nested <video> never work in Firefox. Although the video works. It can be started with a right-click. It is only the 'click' event. All other events work (rollover, mousedown...). Even the 'click' partly works. An addEventListener ('click', funct) fires. But at the same time the CSS :active is ignored. The script works like a charm in all other target browsers. Even on the iPhone the videos (or better their stills) smoothly rotate and you can open them. When I disable( ) Draggable all comes back to life again. Has anyone ever experienced this kind of trouble in Firefox? Any hint is very appreciated.
  5. 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).
  6. Hey guys, I just stumpled upon a problem that only occured in FireFox, giving me the very unspecific error message "NS_ERROR_FAILURE" when animating an SVG. In Chrome, it worked without a problem. After spending quite some time trying to find what's wrong, it turned out that there was an element that was hidden via display="none" for testing purposes but that was still being animated with GSAP. I created a simplistic test case, see the Codepen. In the uncompressed TweenMax.js, it's in line 3000: b = e.getBBox(); It's not a big issue now that I found out what was going on, but maybe this is something that GSAP could check and then just ignore the animation if the element is not visible anyway, to prevent others to run into this in the future.
  7. I have an issue in Firefox. The timelines are not playing. If you click on 'Start X-Ray/Calibration' and 'Select Start' and any of the steps below, a timeline should play. It works great in Chrome and IE, not Firefox. I am using SVGs (mainly for positioning and scaling) and basically just showing and hiding elements within SVGs. An example of the code in question is: TweenLite.to('#glow1, #glow2, #glow3, #startBtn2, #okayBtn1, #okayBtn2, #stopBtn, #calibrate, #yesBtn, #operatorBtn1, #barHighlight', 0, {autoAlpha:0}); var popover1 = new TimelineMax({paused: true}); popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1}) .fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3}) .fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1}) .to('#glow1', .2, {autoAlpha:0}) .to('#baseImage1', 0.4, {autoAlpha: 0.3}) .fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'}) .fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}); $("#overlay20Link, #dotNav2 .page20").click(function(){ TweenLite.to('#popover2, #popover3, #popover4, #popover5, #popover6, #popover7, #popover8', 0, {autoAlpha:0}); popover1.restart(); yes.pause(); calibrate.pause(); popover2.pause(); popover3.pause(); okay2.pause(); }); Other GSAP animations run fine on the same page, it's just these timelines triggered with restart(); that are not working... navigation.js also contains GSAP code for global controls... Any suggestions? Thanks in advance!
  8. 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.
  9. Hi, I've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem: http://codepen.io/mattsrinc/pen/mJMRMX Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger. The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google Chrome are great - testing all this on MacBook Pro, Windows experience is similar. Because of the shaking text animations I have already scripted timelines to have text appear after the zoom ends. Is that because of the (known) scaling bug in the Firefox? I've tested different tricks mentioned in the forum (rotate by 0.01, z etc) yet it doesn't help. When I have explained the issue to the client I thought about simple changing the viewbox of the SVG e.g. having a final view a zoom by using SVG attributes and GreenSock somehow animated the tween (if it would not call scale command implementation). Dear community members, is there any workaround to get same fast animation like in Chrome and Safari? And no, no Flash please - never scripted it.
  10. Hi, I wanted to start a discussion for feedback and thoughts on the best ways to do some masking animation. I've seen the really good one with the green grass and the star shape, but it doesn't work in Firefox. I did find a stackoverflow topic where the author found the Attr Plugin worked with changing <rect> properties! I've got a couple examples up on Codepen and wondered if anyone else has thoughts, examples or work arounds for something we do in Flash so easlily. I'm looking to try and mask an image and reveal it from the center out. clipPath, clip-path and svg are new subjects for me and I found that this works great in Doesn't work in FF http://codepen.io/kaplan/pen/waxrKe Attr Plug makes it work! http://codepen.io/kaplan/pen/bdjoRa I have a local version that does some offsetting and has overflow hidden that I'm going to put on Codepen, but it looks jumpy. This is the other forum post: http://greensock.com/forums/topic/11215-svg-masking-with-gsap-animation/ This is the SO post: http://stackoverflow.com/questions/29413359/animated-svg-clipping-path-not-working-in-firefox
  11. 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.
  12. Hi There, So I've recently completed an animation using a "mask" like effect to reveal a string of handwritten text. This animation works great in Chrome, Safari and even IE(!) but in firefox the dash-array and dash-offset seem to have values that are far too small creating a really weird effect (see codepen.) Is this a known issue? Or have I set something up wrong in my SVG file? Any guidance would be appreciated.
  13. I'm new to gsap. Starting to get into the code. The library looks great. When testing my animations, I noticed they looked a little different under firefox. Was using Elastic.easeOut and it was noticeably bouncier at the end under firefox. Was wondering if it's performance related. I found this greensock speed test page: https://greensock.com/js/speed.html. I selected the GSAP library. My results were as follows: Chrome (40.0.2214.111 m): ~90+fps - excellent IE (11.0.9600.17501): ~55-60fps - also extremely good FF (35.0.1): ~20-22fps - not so great My system is Win 7. I tried multiple times and the results were consistent. I have no idea if it's related to the perceivable differences in the elastic easing but the results for FF were surprisingly poor when compared to the two other browsers. I have pretty much the default settings for FF including hardware acceleration turned on. For kicks, I tried the same site on my Android phone: ~28-32fps - better than desktop FF. Do you see similar results with the latest version of FF? Is this a known issue with FF? Thanks, Peter
  14. 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?
  15. Newbie here. When using transformPerspective + fromTo and setting alpha:0 to alpha:1 tween never happens. But if alpha value is never set or alpha is 1 to 1 everything works just fine . This is only in FF.
  16. Hi all, Recently switched to the JS environment, after working with Greensock for some months in Flash. I have a question: I've been working on a banner ad where a DIV is rotatated and scaled. It is a scale up of 20% over 4 seconds, causing FireFox to render the animation not very smoothly. Chrome works like a charm and Safari is having some problems too I guess (I couldn't watch it on IE yet...). I added a codepen, but have the feeling the effect is a little bit worse in my own file. Any ideas how this is caused? Is it the rotation combined with the scale? Thanks in advance!
  17. I have a special case, where I would like to rotate 90 degree a cuboid. It all works fine in Chrome, but there are some glitch in latest Firefox and I'm not able to find out what could cause this: This happens lot of time for me, also when you resize the lower pane of codepen, it sometime renders fine. Also before the animation finish, the red pane is false rendering it's rotation and also another glitch happen. You can see it in codepen, by commenting out timeline.play(); and uncomment: timeline.progress(0.93); Is there any way to solve this issue?
  18. Hi all, I'm having this problem with SVG rotation. Basically it always reset its position once the animation is finished. Codepen: http://codepen.io/anon/pen/QwwEYX During testing, it works fine on Chrome, but not of Firefox and mobile Safari. I'm using Firefox 33.1.1. Anyone's having the same issue? Any pointer is greatly appreciated. Cheers! UPDATE: Apparently the problem is exclusive to FF for mac and Safari mac.
  19. Hi, I’ve spent the last day building a working rubix cube demo using TweenMax to position and animate the objects accordingly. Draggable is being used to rotate the cube X/Y and throwProps is used too. Firefox is displaying some very odd, back-face type display issues that I can't seem to resolve, can anybody suggest a work-around or fix to correct this problem? IE10 is simply flattening the whole object onto a 2D plane and not allowing any z-depth. The demo will auto rotate 20 times before allowing user interaction by "swiping" a side to rotate it, or dragging the background to rotate in the cube in 3D space. Any help would be gratefully appreciated. View the demo here: http://www.rogueinteractive.net/rogueiOS/rubix.html Pete
  20. Hi, I've just stared working with GS in Javascript and so far love the ease of use and its flexibility. However, after testing my animations in different browsers, I've been encountering problems with certain parts. Everything was working great in Chrome, but Safari and Firefox seems to render things differently, such as elements that are misplaced in Firefox, or some that don't even show up in Safari. Any idea what can be causing these compatibility issues? Please, check the link below: http://jsbin.com/ferin/19/edit Thank you
  21. My apologies for being a bit off topic... On my computer it is very common to see a replacement icon rather than font symbols in FFox. Attached are examples from Codepen and SitePoint. The symbols on both these pages display properly in Chrome and IE. I can't be the only person who has this experience - it probably happens to many of our clients. Any ideas what causes it and how to avoid? Thanks.
  22. One co-worker has done these animation flips. TweenLite.to(banner_box_7, .18, { rotationX: banner_flip_dgr, transformOrigin: banner_fliptype, ease:banner_flip_ease_in, ....... And we get these pixel lines stuck (only sometimes on firefox only) First image is before animation, later is in mid animation and you can see 1px lines getting stuck. Anyone who know what can cause this. ** Update ** I know what caused this, it´s a bug in current Firefox version https://bugzilla.mozilla.org/show_bug.cgi?id=505115 moderator can close this thread.
  23. Hi, first of all i love the Engine. I use the latest 1.11.1 engine. Today, after the FireFox 25 Update has been released, we get 2 very strange effects in Firefox on MAC. 1. Some Easing (like power3.ease..., power4, power2..) adds a black background for Transparent PNG Images. If i change this easing to linear or i.e. Back.easeOut the black bg disappear. Live: http://www.themepunch.com/codecanyon/revolution_wp/fullwidth.php (slide 2) See Video also: http://screencast.com/t/JiQap5oBlW 2. In Firefox the Animated Iframes with Vimeo Videos in it are not Clickable. Only in Firefox, only on PC. If i remove greensock animations of the iframe, videos are clickeable. See live: http://www.themepunch.com/codecanyon/revolution_wp/fullwidth.php (at slide 4 and slide 5) Any tipps or advise would be great ! Thanks a lot, Krisztian from ThemePunch
  24. Team, Doesn't mozilla firefox support TweenMax feature? I don't see it working in IE7 too. I have a set of ordered list that will flyin on page load. This works fine in Chrome, IE8 and IE9, but it doesn't seem to work fine in Firefox 14 and IE7. Could you please let us know the support features. And the error obtained in FF is as below: "TypeError: can't convert undefined to object: Line 14, Tweenmax.js" Thanks Abhilash
  25. Tested on Window and Mac, I have the same issue for Firefox, the margin & padding isn't animated. http://jsbin.com/UGOSEGO/16/edit?html,output
×