Jump to content

Search the Community

Showing results for tags 'firefox'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


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

Found 58 results

  1. Hi, I have a problem and don't understand what to do. I created Html5 dynamic banner from Google web designer template and uploaded to Google Ads. So the problem is that in Firefox click url is not working. Other browsers works fine. In Firefox console when I click ad they show me this. Maybe someone know how to solve this problem? Also I changed transform-style: preserve-3d; to "flat", but don't solved problem.
  2. HI for everybody! I need your help guys to fix the problem with animation in my NuxtJS project. Here is the link http://wisead.ru It works good in Chrome, Opera, IE, Edge, but i don't know why it doesnt work good in ff I just use this code animateLines() { this.linesRotation = new TimelineMax({}) this.linesRotation.staggerTo(this.lines, .5, {scale: .6, rotation: this.rotateDeg, ease: Power3.easeInOut}, .035) this.linesRotation.staggerTo(this.lines, .5, {scale: 1, ease: Power3.easeInOut}, .035, "-=1.5") this.rotateDeg += 90 }
  3. Hi all. Please, help me. Why does circle clip path on image working wrong in my pen in firefox browser? My animation begin from circle(0% at 0% 50%) to circle(150% at 0% 50%), but in firefox it has value clip-path: inset(150px at 0% 50%). Why it happened? Thank you for answers
  4. This page is rendered differently in Firefox as opposed to Chrome. PAGE Which one is correct and how to fix it?
  5. Hello, I was wondering, does anyone see lag when playing animations on Firefox? I made just a few animation so far as I am a "newbie gsap coder", what I have experienced is that those animations are smooth in chrome, safari and IE but they lag a lot in Firefox. At first I thought I was coding in the wrong way my scripts but then I saw that even the animations in the "Examples" page have the same problem (eg. https://www.reputationsquad.com/). What I see is that this doesn't seem a GSAP problem but is like Firefox is having hard times with all kind of animation methods. I tested it both on my macbook pro retina (late 2015) and on a mac mini, in both cases if I try to open a website like: http://beta.wind-and-words.com/ (examples page), the fan start working at max power! Like when you render an After Effects animation with all your cores. Do you have the same problem? Do you know any solution or workaround? Thanks guys!
  6. 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
  7. I am running into an issue with my QA department and using the ScrollTo Plugin on a Windows 10 machine while using Firefox. They are saying that the problem occurs in all Browsers, but I'm only able to replicate it in FireFox. This is what they wrote: While the text is auto scrolling, pull the scroll down or click on the downward arrow to scroll the ISI down Expected result: user should be able to scroll up and down at any time Actual result: the scroll is not responding, a user needs to scroll up first to be able to scroll down Is this a bug in the ScrollTo Plugin or my code? https://codepen.io/blooaux/full/ELMPqw
  8. Hi All, I'm hoping to get some help with some animations I've been working on. It works well all browsers, except FireFox. In the console I can see an error `TypeError: i is undefined`. On my local it appears that this error is originating on line 97 of DrawSVG plugin. I was looking at the plugin code and noticed that there is a Firefox bug for when an element isn't visible - I wonder if that's what's happening here. I'm trying to find out what exactly is happening so I can fix it. The idea of this project is to funnel users into their appropriate usage category. Each question displays an animation and asks a question. The first animation runs, but when I try to click 'Get Started' the JS is blocked, so I can't click to the next question. I've attached the codepen for reference. If anyone could shed some light on this, I would so appreciate it. Thanks!
  9. Hey everyone. I am building a website using a drag and drop menu where a new page is opened when an element is dragged and dropped on one of the menu pages icon. It's been working alright for a while until today. It just takes me to the new page but page content doesn't load. This happens only in firefox. Everything works perfectly on all other browsers. I keep getting this error on firefox - NS_ERROR_FAILURE: TweenMax.min.js:15. I'm confused as at this point , I don't know how to move forward. Can someone help?
  10. As you can see from the demo url, when you scroll down, and click on the "up arrow" on the bottom right corner, scroll to plugin fails to scroll on Firefox. However if you disable the "scroll-behavior: smooth;" css on body element, the scroll works perfectly. http://goodlife.fuelthemes.net/
  11. Hello Fellow GreenSockers Today Firefox's new update (v57) and browser Quantum was released. So if you update Firefox today you will notice it is 2X faster, uses 30% less memory than Chrome, and looks very different. Just letting you know in case you need to check any previous animations to make sure it is still animating and rendering the same. https://www.mozilla.org/en-US/firefox/ Happy Tweening!
  12. Hi all, Currently I'm testing a website on which I use some GSAP animations. One of this animations causes a error in Firefox (v51 run a Macbook Pro retina). This is the code that causes the error: this.tl .set(this.modalBackground, { display: "block", className: "+=" + this.modalBackgroundModClass }) The classname line causes the following error in Firefox: TypeError: this.ownerSVGElement is null This code does work on all other devices and browsers on which I've tested on. I also can make it work by adding the class like this: this.tl .set(this.modalBackground, { display: "block", onComplete: function () { this.modalBackground.classList.add(this.modalBackgroundModClass); }.bind(this) }) But I would like to use the className way. Any idea on what is going wrong? Thanks in advance.
  13. Hi there, I have created this background pattern animation and it works smoothly on safari/chrome/IE but I am experiencing some kind of stutter/lag in firefox. It even causes lag outside the browser when using other programs (OS X/macbook pro). I have searched the forum and tried all possible solutions I could find (force3D:true, rotation:0.01, etc.) but no luck. Would really appreciate any help as I am stumbling in the dark here. Oh and thanks for an awesome framework! Great stuff! Note: somehow when using codepen the strokes are blurry. This doesn't happen when working on my test server: http://preview.frodoschering.nl/pattern-animation-2/ so probably unrelated to the above issue.
  14. BG image moves across the stage poorly, in a stepped fashion, when viewed in Firefox but runs smoothly on other browsers like Safari and Chrome. I'm on a Mac so I'm not sure how it appears on other. What am I missing in my code? http://motion.hotternellstudios.com/KICK/ad/
  15. A while ago we built a website using GSAP, which can be seen here for reference: www.mikutech.com We use TimelineMax and TweenMax to power all of the animations on the site. It recently came to our attention that the site sometimes crashes the browser, but only specifically on Firefox for Mac. We've had two separate Macbooks running different versions of Firefox crash on the site now. Chrome and Safari run the site fine, and all three run fine on Windows. I tossed together a sample using the same kind of transformations and similar amounts of animations in the the codepen link attached. It runs fine in all of my browsers on Windows but again, in Firefox on Mac, if you try to scroll around it freezes and eventually crashes. The website is kind of old at this point and has an older version of GSAP on it, but we have a local version of the site with all the libraries updated which exhibits the same behavior. If we disable the animations the site is smooth, so it's definitely not any of the other scripts on the site causing the issue. Any help or insight into how to avoid these crashes would be greatly appreciated.
  16. I'm writing the code to draw bar charts and am using timelinemax to animate the initial transition of the bars from 0 to their height. And it works beautifully in Chrome, but in Firefox and Edge the height attribute isn't animating. Nothing displays at all in IE, but that seems to be a separate problem. I'm having a hard time recreating the exact problem in the code pen, but the pen doesn't animate the height in chrome and doesn't show anything in ff and edge, which is similar. Here is what the actual code looks like. var tl = new TimelineMax(); var delay = 1 / barData.Segments.length; for (var i = 0; i < barData.Segments.length; ++i) { var segPercent = barData.Segments.Count / maxValue; var segHeight = axisHeight * segPercent; var y = startY - segHeight - prevHeight - 1; // - 1 so that bar doesn't overlap axis var segColor = barData.Segments.Color; var bar = document.createElementNS("http://www.w3.org/2000/svg", "rect"); bar.setAttribute("class", "bar-chart-segment"); bar.setAttribute("x", x + (barWidth / 10)); // bar.setAttribute("y", startY - prevHeight - 1); // magic numbers in these lines are for padding bar.setAttribute("width", barWidth - (barWidth / 10)); // bar.setAttribute("height", 0); bar.setAttribute("fill", rgbToHex(segColor.R, segColor.G, segColor.B )); bar.setAttribute("onclick", "showSVGChartDrilldown('" + uoKey + "', '" + barData.DrillDownArgs + "')"); group.appendChild(bar); tl.to(bar, delay,{ y: -segHeight, ease: Power0.easeNone }, i * delay); tl.to(bar, delay, { height: segHeight, ease: Power0.easeNone }, i * delay);
  17. Hi, For a yet to be released project i am animating an really big SVG image which has PNG layers and some SVG elements. The entire SVG has a shocking size of 1.8Mb. I am animating the x position of 3 groups containing SVG and PNG elements with: TweenLite.to("#group1", 1, {x:50}) // results in this element style when stopped animating: "transform: matrix(1, 0, 0, 1, 0, 70);" data-svg-origin="307.8999938964844 6.610000133514404" The animations looks smooth enough on very slow Windows machines with Chrome, IE & Edge but on Safari and Firefox it is stuttering and lagging to a point where the website looks to be loading in 1 frame per second. What would be an good alternative or workaround to get it to work smooth across all browsers.
  18. Hi guys. Finally got the powers that be to agree to switch over to GreenSock for everything and my first demo project is a few banner ads. All work perfectly except for in Firefox. I've searched and couldn't find anything that fits my scenario so posting new. Here's my script from an expanding ad. <script> var $text = $('#text'); var $lock = $('#PadLock'); var $expand = $('#expandButton'); var $close = $('#closeButton'); var $UnlockText = $('#UnlockText'); var $key = $('#ring'); var $CTA = $('#clickthroughButton'); tl = new TimelineLite({paused:true}); tl2 = new TimelineLite({}); tl2.to($lock, .5, {rotation: 25, left:'95px', ease:Sine.easeInOut, top:'60px', transformOrigin:"left 50%",}) .to($lock, .5, {rotation: 5, left:'110px', ease:Sine.easeInOut, top:'78px', transformOrigin:"left 50%",}) .to($lock, .5, {rotation: 15, left:'103px', ease:Sine.easeInOut, top:'69px', transformOrigin:"left 50%",}) .to($lock, .5, {rotation: 10, left:'106px', ease:Sine.easeInOut, top:'74px', transformOrigin:"left 50%",}); TweenLite.from($text, 2, {left: '-200px', ease:Circ.easeInOut, delay: 1}); TweenLite.from($expand, 1, {bottom: '-50px', ease:Expo.easeIn, delay: 1.75}); tl .from($key, 1.5, {rotation: -180, top: '-300px', left: '500px', ease:SteppedEase.easeIn}, '-=.5') .to ($UnlockText, 1, {opacity: 1}, '-=.5') .from($CTA, .75, {bottom:'-136px', ease:SteppedEase.easeInOut, transformOrigin:"left 50%"}, '-=.5') .from($close, 1, {top: '-40px', ease:Circ.easeInOut}); $("#expandButton").click(function() { tl.play(); }); </script> I'm sure it's just some tiny thing that Firefox hates and is choking on, but have rewritten almost the entire thing piece by piece to no avail. Any advice MUCH appreciated.
  19. Danik

    A few questions...

    Hello everyone, I would like to start by apologising for the oh so abstract title, my questions vary quite a bit. I recently began working with SVG animations, started with SMIL, continued to Velocity.js, and then found out about GSAP and its great browser support - so here I am. Bearing this in mind, while looking at my Codepen if you guys find anything I did wrong or simply something you would have done differently be it in the SVG, or the GSAP implementation please do not hesitate to mention it. So in the following Codepen that I am currently working on I ran into a few issues: http://codepen.io/anon/pen/WxJQQr?editors=1010 1. On Firefox the cup sections fill up and then return to their original state, for those familiar with SMIL it had the option of fill="freeze" in its animate which would stop the animation at its end state. I am looking for something similar in GSAP - or perhaps something else. 2. On Firefox one of the gear does a proper rotation around the center transform-origin while two of the gears decided to do their own thing. 3. In Internet Explorer, the cup does not even fill up. It doesn't seem to be anything wrong with my linear gradient as the inside of the gears does fill up but has a lower opacity than it should. 4. I ended up solving this with adding a negative delay, but what would be the proper way of starting an animation while another one is still in progress in GSAP? Would it be making a new timeline? (I also solved the issue of infinite repeat by creating a new timeline - is this the right approach?) 5. And a quickie - which combination of TweenLite + extras would I need to maintain this at minimal file size? Any help would be greatly appreciated. Thanks in advance!
  20. I've experienced some issues animating background position. As usual everything is perfect in Webkit I only care about IE9+, FF, Chrome, Safari. TweenMax.fromTo($('#rain-' + i), 1, {css:{'background-position': ""+rainHeight+"px 0px"}}, {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); This animates the position of a css linear gradient. It works on everything except Firefox, Firefox just does nothing. However this.... (with camel cased keys) TweenMax.fromTo($('#rain-' + i), 1, {css:{backgroundPosition: ""+rainHeight+"px 0px"}}, {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); ...works fine in Firefox, but causes an invalid argument error in IE10 (it's fine in IE9) SCRIPT87: Invalid argument TweenMax.min.js line 16, character 20973 For the time being I have implemented the following special case which is grim. if (document.all && window.atob) { // Firefox breaks with 'background-position' // IE10 breaks with 'backgroundPosition' // bodge to workaround TweenMax.fromTo($('#rain-' + i), 1, {css:{'background-position': ""+rainHeight+"px 0px"}}, {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); } else { TweenMax.fromTo($('#rain-' + i), 1, {css:{backgroundPosition: ""+rainHeight+"px 0px"}}, {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); } Any suggestions? Is this something that can be fixed in TweenMax?
  21. Hi there... I've just started with greensock and been loving it so far. However, I'm having an issue with getting rotationY to work in Firefox, IE11 and Edge. I need to support these browsers and everything else has worked perfectly! I've attached my codepen, can anyone help? It works perfectly in Chrome and Opera!
  22. I wonder if anyone else got this error on Firefox... NS_ERROR_FAILURE ColorWheel Bug It seems to be a combo of TweenMax and SVG in Firefox in Mac and Windows. Chrome looks correct. There should be two color wheels on the bottom of the screen. Pressing and releasing them should select colors.
  23. Hi, I'm creating a simple polygon svg shape, and using it to mask an image using the clip-path:url(#id) method. I'm then trying to animate this using GSAP. This works fine, except in FireFox, where no animation occurs. This can be viewed at this codepen: http://codepen.io/rorytawn/pen/OVeWNB. All I'm trying to animate is simple 2D transforms like x and scale. I know FireFox has some issues with clip-path, so I tried animating the same shape, when it is not used as a mask, and that works fine in FireFox. So the issue is something to do with animating the svg when it is assigned to clip-path. I tried another example using GSAPs AttrPlugin, which does work in all browsers including FireFox. Codepen here: http://codepen.io/rorytawn/pen/MwMbVx. But as far as I'm aware, this won't allow me to animate using css features, rotation, skew etc. If anyone can please point me in the right direction to get the first example to work in FireFox it would be much appreciated! Many thanks!
  24. Hi everyone ! I got a problem with Firefox. I'm trying to scale dot with transformOrigin set as "center", like in the code below: TweenMax.to(flux, 0.15, {scale: "1", transformOrigin:"center", delay: delayFlux}); In Chrome, I don't get any problem, the dot scale up properly (first gif). But in Firefox, the dot does something weird like in the second gif. I've tried with transformOrigin: "50%" or "50% 50%" without success. Do you have any idea about that problem ?