Jump to content
Search Community

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. When using firefox the scrollable timeline on https://eattheworldbetter.com/scan/banana-adv/ doesn't work. The (in this case) banana doesn't appear to scroll with the line. See chrome to check how it supposed to work. I don't get any errors in de console. Does anyone know why this does not work?
  2. Hello, I have a problem with this code snippet, but only in Firefox. Chrome and IE work fine. I've already mentioned the problem in another thread, but I think that's a different topic and area, so i'll start this new thread. Unfortunately I cannot present a "normal" minimal demo, but i've created a codepen to illustrate the problem: https://codepen.io/design4u-koeln/full/xxyXOaO It's about the two areas with those gray bootstrap cards. CSS: .karteien, .karteien2 { height: 100vh; width: 400vw; display: flex; will-change: transform; } .karteien .gsapkarteiwrapper, .karteien2 .gsapkarteiwrapper { padding: 100px 0; height: 100%; width: 100vw; will-change: transform; } JS: const t1 = gsap.timeline(); t1.fromTo('.karteien .second', {x: '-100%', y: '+100%'}, {y: 0}) t1.fromTo('.karteien .third', {x: '-100%'}, {x: '-200%'}) t1.fromTo('.karteien .fourth', {x: '-400%'}, {x: '-300%'}) const t2 = gsap.timeline(); t2.fromTo('.karteien2 .second', {x: '-100%', y: '+100%'}, {y: 0}) t2.fromTo('.karteien2 .third', {x: '-100%'}, {x: '-200%'}) t2.fromTo('.karteien2 .fourth', {x: '-400%'}, {x: '-300%'}) ScrollTrigger.create({ animation: t1, trigger: '.karteien', start: 'top', end: 'bottom', scrub: true, pin: true, onToggle: self => console.log("toggled, isActive:", self.isActive) }); ScrollTrigger.create({ animation: t2, trigger: '.karteien2', start: 'top', end: 'bottom', scrub: true, pin: true, onToggle: self => console.log("toggled, isActive:", self.isActive) }); I added this here to illustrate. onToggle: self => console.log("toggled, isActive:", self.isActive) If you take a look at the pen with Chrome and Firefox, you'll see that Firefox is too late to start interacting with the element. If you click "F12", change viewport height or load the page for the second time, everything works perfectly in FF as well )) Sometimes the black footer moves up, sometimes not No matter what I do - unbind jquery, deploy window.load, or jquery document.ready, or even window.resizeTo("99.99%","99.99%"); ?‍♂️- it doesn't want to work properly in FF. Does anyone have an idea what could be causing this? Thanks!
  3. I know this has nothing to deal with GSAP, just in curious i'm asking if any faced this issue and have a solution to it please share. Text container width rendered in different sizes in Chrome and Firefox Click here :- to check the issue in stackoverflow.
  4. 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.
  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 Jas
  6. 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: "30% 20%%", }, }); if (tableAndAbove) { timeline.from("#sellersLandingMobile", { duration: 1, scale: 0.8, autoAlpha: 0, rotation: 0.01, }); timeline.from( "#sellersLandingMobile", { duration: 1, translateX: "20%", ease: "expo.out", rotation: 0.01, }, "-=0.6" ); } timeline.to( "#sellersLandingHeroText .hide-text", { duration: 0.8, ease: "expo.out", translateY: 0, delay: 0, autoAlpha: 1, rotation: 0.01, }, "-=0.9" ); timeline.from( "#sellersLandingCTA", { duration: 0.5, ease: "expo.out", scale: 0.5, autoAlpha: 0, rotation: 0.01, }, "-=0.5" ); document.querySelectorAll("#sellersLandingStoreLink").forEach((el) => { timeline.from( el, { duration: 0.5, ease: "expo.out", translateY: 20, autoAlpha: 0, rotation: 0.01, }, "-=0.3" ); }); const images = [ "#sell24By7Img", "#chatBroadcastInvoiceImg", "#lightningfastpaymentsImg", ]; const sections = [ "#sell24By7TextContainer", "#chatBroadcastInvoiceTextContainer", "#lightningfastpaymentsTextContainer", ]; useScroll(); useEffect(() => { gsap.to("#punchGrowthHeading .hide-text", { scrollTrigger: { trigger: "#punchGrowthHeading", start: "top 80%", }, duration: 1, ease: "expo.out", translateY: 0, rotation: 0.01, }); images.forEach((el, index) => { gsap.from(el, { scrollTrigger: { trigger: el, start: "30% 80%", }, duration: 1, ease: "expo.out", autoAlpha: 0, transform: `translate3d(${index === 1 ? 100 : -100}px, 0, 0)`, perspective: 1000, rotation: 0.01, force3D: true, }); }); sections.forEach((el) => { gsap.to(`${el} .hide-text`, { scrollTrigger: { trigger: el, start: "30% 80%", }, duration: 1, ease: "expo.out", translateY: 0, rotation: 0.01, }); gsap.from(`${el} p`, { scrollTrigger: { trigger: `${el} p`, start: "30% 80%", }, duration: 1, ease: "expo.out", autoAlpha: 0, }); });
  7. 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 still there. I haven't managed to get all of my content into a CodePen demo, but I'm attaching an example from the docs which displays the same problem, and a GIF screen capture. Is there anything I can do to mitigate this?
  8. 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!
  9. 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?
  10. 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?
  11. 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 and Ms Edge (chromium based browsers), but touch is not working at all in Firefox (Windows) here. In the codepen I used the actual gsap template from this forum, which is still using version 3.2.3, but I've also seen this beviour in version 3.2.4 locally here. [edit] the touchstart seem to be triggering something in draggable though, because when just moving the mouse after trying to drag with touch, the object gets dragged, eventhough none of the mousebuttons are pressed. Also this issue occurs with Draggable type set to 'x,y' as well as set to 'rotation'
  12. 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 his Mac I have tried the rotation fix I have tried force3D I have tried using low res images The more effects that I add, the worse it gets i.e. autoAlpha, Rotation, filter etc... Additional information: I am using GSAP 2.1.3 as haven't had the time to upgrade (after I post this, I will attempt to create the same animation with the latest version in a separate codepen) It does seem as if there is a minor memory leak of some sort in either GSAP or Firefox because my fan goes mad when I have the codepen tab open and on screen I have wondered whether it is to do with the retina display as I had a similar issue with my fan in the past with this plugin that was caused by the retina display Can anyone suggest what may be causing this?
  13. 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!
  14. 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 }
  15. 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
  16. This page is rendered differently in Firefox as opposed to Chrome. PAGE Which one is correct and how to fix it?
  17. 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
  18. 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
  19. 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!
  20. 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?
  21. 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/
  22. 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!
  23. 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.
  24. 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.
  25. 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/
×
×
  • Create New...