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
  • Supercharge

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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi Devs, I don't know what's wrong in my code , the animations are super slow in firefox and sometimes in chrome as well. I have two issues Translating animations are super slow in firefox and sometimes in chrome Text animations are flickering on scroll I use SVG as react components Can u guys please help me improve my code. Im using NextJs and GSAP3. Thanks. let timeline = gsap.timeline({ delay: tableAndAbove ? 0.5 : 0, scrollTrigger: !tableAndAbove && { trigger: "#sellersLandingMobileContainer", start: "
  2. I've been using ScrollTrigger for the first time and loving it! But, I've come across some issues with the plugin in Firefox specifically. I've been working on an animation with a large pinned item. Often, if you scroll too fast there's a brief moment where the pinned item will keep scrolling - before GSAP catches up and pins it in place. I know this has to do with how browsers handle scroll behavior, but it seems just fine on Chrome, while Firefox is really buggy-looking if you scroll too fast. I've tried adding anticipatePin and it might help a little bit, but the problem is stil
  3. 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 cli
  4. I have a line of code like this gsap.to(this.$el, 0.5, { x: -bgOffset.x, y: -bgOffset.y, ease: Power2.easeOut }); In Chrome (Desktop and Mobile) GSAP does this style="transform-origin: 50% 50%; transform: translate(-50%, -50%) translate(18px, 3px);" But Firefox mobile does this style="transform-origin: 50% 50% 0px; transform: translate3d(0px, 0.9928px, 0px);" Is there any way to force a consistency with the way this is handled?
  5. I'm using gsap to make a div follow my cursor. Hence I need to center it. To do so I use the following code: gsap.timeline().to(innerCursor, 0.1,{ transform: `translate3d(${clientX}px, ${clientY}px,0) translateY(-50%) translateX(-50%)`, ease: Power1.easeInOut }); This works for Chrome, but not Firefox or Egde - how so? I know translate(-50%, -50%) isn't supported by Firefox, but how can I bypass this?
  6. Having problems with touch on some projects that are using Draggable I am now diving into this. I'm having problems with touch on both rotating draggables as well as translating draggables on several browsers, but Firefox seems to be the most problematic one. This thread though is about a particular draggable issue that only seem to affect Firefox, while other browsers seem to work fine: The codepen included here is, as you can see, as easy as it can get. A svg circle where Draggable is put on with inertia and rotation. Touch in this example is running fine in browsers like Chrome
  7. I have read various posts on here, some old, and some more recent, about animations being glitchy in Firefox. I have done my absolute best to obtain as much information as I can prior to posting this, in addition to creating the attached Codepen. For some reason, I cannot get my animation to play smoothly in Firefox. To keep things simple, this is all the information I have (and have learned/tried): Issue only occurs in Firefox on Mac OS (smooth as silk in Firefox on Windows) Not my graphics card as a) it is a top spec 2019 Macbook Pro, and b) my designer has the same issue on
  8. 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
  9. 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 i
  10. 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.
  11. 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 }
  12. 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
  13. This page is rendered differently in Firefox as opposed to Chrome. PAGE Which one is correct and how to fix it?
  14. 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
  15. 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
  16. 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 qu
  17. 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?
  18. 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/
  19. 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!
  20. 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.modalB
  21. 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 work
  22. 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/
  23. 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
  24. 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.Segme
×