Search the Community
Showing results for tags 'firefox'.
Found 67 results
-
deleted
-
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.
-
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.
-
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!
-
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!
-
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
-
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).
-
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).
-
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.
-
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
-
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. -
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!
-
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.
-
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
- 1 reply
-
- 1
-
-
- attrplugin
- svg
- (and 2 more)
-
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.
-
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.
-
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.
-
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? -
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
-
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!
-
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.
-
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!
-
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.
-
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?
-
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.
