Jump to content
GreenSock

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

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, 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. 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
  6. 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
  7. 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!
  8. 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?
  9. 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/
  10. 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!
  11. 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.
  12. 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!
  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. 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!
  21. 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
  22. 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).
  23. 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).
  24. 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.
×