Search the Community
Showing results for tags 'ie'.
-
Hi, I'm having to use an SVG mask (so it works on Explorer) I wondered how I would animate the containing image, without moving the mask? See demo
-
Hi all, I just ran into a weird thing – CssRulePlugin doesn't seem to work in neither Edge 41.16299.15.0 nor IE 11.192.16299.0. Here is what I'm doing (the old 'animate max-height and set height to auto' trick): infoCss = CSSRulePlugin.getRule('#info-input:checked ~ #info-inner'); TW.set(infoCss, {cssRule: {maxHeight: infoElm.clientHeight + 'px'}}); //TW is Tweenlite window.addEventListener('resize', () => { TW.set(infoCss, {cssRule: {maxHeight: infoElm.clientHeight + 'px'}}); }); This is no big deal as I can of course just use GSAP to do the same animation instead, but still, I thought I'd mention it. As soon as I remove the above code, everything else works fine.
- 2 replies
-
- cssruleplugin
- edge
-
(and 1 more)
Tagged with:
-
Hello GreenSocks! I've been working with gsap for a short while. But this is my first problem with which I can not get any further. So my first thread Hello!! My Goal is: to animate multiple Images to a Video. For this I found already a snippet (dont now the url anymore) which displays and hide immediately a image (Combined with a staggerTo). So my Problem is: It works! But not on all Browsers. If i clean the Cache or hit reload, over and over, the animation in Internet Explorer and Edge is very very flashy! My Question is: What went wrong?
-
I have been working on this project for the past few months where I use drawSVG to draw an SVG. Everything seems to work as it should in Chrome and Safari but it won't draw the lines in IE. I pulled the code from my project and put together this pen. If you run it in Chrome you will see the lines draw on the screen. If you run the pen in IE the shape just appears. I opened up the javascript console in IE and I notice it is throwing an error, SCRIPT65535: Unexpected call to method or property access. DrawSVGPlugin.min.js (13,1184). Anyone have any ideas as to what I am doing wrong?
-
Hello tweeners, drawSVG - circle I'm getting the reverse behaviour on IE in contrast to Chrome and FF. In my simple example Chrome and FF animate leaving a "u" shape, while in IE leaves a "n" shape. Any work-a-rounds? Regards Joostan
-
Hi all, Hoping someone can help me out with an issue I'm having with the animated SVGs in my animation not displaying in IE. Bascially, there's one large SVG that takes up the whole background and then 3 smaller SVGs that are animated next to standard text. I've worked through few suggestions via these forums without any luck so far. All fine in other browsers, but with with IE I'm not even able to view the SVGs to even work out if they're animating correctly or not. Here's the codepen link: http://codepen.io/lachlants/pen/bed88f588e7c90bd4efb5df6e80da438 Further to this, the performance seems to be a bit laggy. Especially on mobile. Love some pointers if someone can help out. Thanks in advance, Lachlan
-
Hi, I'm fairly new to this SVG animation and getting by mostly by copying someones work and modifying it. (Still learning alot). For that codepen link that I've provided - it works smoothly in almost all browsers except IE and IE Edge. Its basically moving the pattern from SVG horizontally and repeating it. It seems like IE cannot recognize attr:{x} for some reason. advance thanks!
-
In IE, this image scaling is jittery Is there a way to force it to animate smoothly? Thanks
-
Hi, testing on IE 11 I'm experiencing a really bad animation rendering. As you can see on the Pen, it is a deadly simple animation: one single div with an image scaling and translating. On Chrome it is perfectly fluid. On IE instead it is really choppy. I tried force3D both enabled and disabled: no changes. I'm on Win7 but a friend with Win8.1 confirmed to me the same result. Am I doing something wrong, or maybe do you know any hack / trick to solve this issue? Thanks
-
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?
- 11 replies
-
I'm trying to morph an SVG with a plugin and I'm getting pixel loss issues when previewing out of IE and Edge. Here's a screen capture of whats happening - https://www.dropbox.com/sc/xpqj3ggo2lavxbu/AAAgLnFAG-u4r-WfGf3urznla Anyone encounter this issue before? Thanks!
- 4 replies
-
- morphsvgplugin
- morphsvg
-
(and 3 more)
Tagged with:
-
I just added the gsap library to my web application. I have a set of notifications that appear, and in the case that it is a "sticky" notification (which can only be dismissed via code and not user interaction) it is meant to shake when it is clicked on. This works great in all browsers but does not work in IE at all. Apparently the issue is that the element that I am asking to animate with gsap already had a css "transition" property attached to the transform value. If I remove this property, then it will animate properly. I have not seen anything in the gsap forums/documentation to explain this behavior however. To be clear, my web application first makes the notification appear by adding a class (show-notification) to the div, which because of its transition property, animates it into view. I am then wanting to use gsap to animate it for a bounce animation in certain cases when the user clicks on it.
-
Hi guys, I am working on a banner animation that involves scaling 2 images (placeholders) at the same time in a sort of parallax effect: http://codepen.io/dada78/pen/ffb31fe839a80e3e8f4826561bd3f691 It animates smoothly in webkit and mozilla but stutters (a lot) in IE10 and 11. ANY clues how to solve this at all? Thanks!
-
what can i use instead of transform-style in IE?
- 1 reply
-
- internet explorer
- ie
-
(and 3 more)
Tagged with:
-
Hey guys, I'm creating some banners for a client but running into issues with compatibility. The banner functions as planned in FF and Chrome, however in IE the Canon logo just site in the middle of the frame, with no animation. I've looked online and found some people complaining about IE issues with CSS animations, however it's usually transforms they can't get to work. All I'm using is fades, minus one button adjusting the y axis. Can someone please tell me what I'm doing wrong? I'm not that well versed in GSAP. CodePen: http://codepen.io/anon/pen/OypmrM Thanks in advance!!
-
Hi all, I need to create a speed gauge with SVG animation. I began by using VelocityJS, but when I tested in IE I realised that IE ignores `transform-origin` so that the needle on the gauge would not rotate correctly. I've been exploring alternatives and discovered that both SnapSVG and GSAP are better suited to my needs. However, they both suffer another problem in IE. In addition to the gauge's needle rotating, I need an arc around the gauge face to follow the path of the needle. (See my CodePen for clarification.) I animate `stroke-dashoffset` to create this effect. It works beautifully in FF and Chrome. However, in IE10/11 it seems to draw some other shape. Any help would be most appreciated. Thank you.
-
Hi, This codepen works in IE but not Chrome or Firefox. Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working. Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike... Tested on: Windows 10, IE: 11.0.10240 FF: 41.0.1 Chrome: 45.0.2454.101 m Doing some searching in different codepens i find several pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts. I hope anyone can help out. Kind regards, Math
-
Hi, people) Had anybody problems with animation in 'super' browser IE8, 9, 10 and so on? My animation didn't work in IE9(. It's handled through jQuery... in all other browsers everything is ok. Could you help me with advice! thanks a lot! $(document).ready(function(){ TweenMax.from(".logo", 0.8, { x: 500, y: 500, rotation: 2580, opacity: 0, scale: 0.2, }); });
-
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.
-
I am trying to use card flipping as part of an animation, and I am following the cool-looking example in the GSAP codepen. However, I noticed that it does not work on IE 10. On IE 10, the cards do flip, but instead of seeing the "back" card you see the backface of the front card. It appears as though there is a problem with the backface-visibility in IE 10. What can I do to make this also work in IE 10? Thanks! http://codepen.io/GreenSock/pen/yzahJ
-
Hey there. Seem to be having some issues with the draw SVG plugin on IE when trying to animate a circles stroke around a central point to fill up the background. The Problem only occurs on IE When the dial type animation becomes glitchey. The Codepen example shows this.
-
Draggable works everywhere except IE11 (edge mode), in which it only works on the second click... Has anyone else experienced this? I thought it might be my code but the same problem occurs on the demo here: http://www.greensock.com/draggable/ Thanks
-
I am hopeful that someone might be able to offer a suggestion or two about how I might work around an issue that I'm experiencing. I've implemented TweenLite carousel on one of the pages for our corporate website 2 years ago. Everything works perfectly until I've tested it in IE 10. IE 8 and 9 are completely fine. Does anyone know what might happened. I was trying to link to the latest TweenLite.min.js file - didnt help. Any suggestions? Thank you.
-
Oh how I hate IE. I have this working in all browsers, including mobile iOS. The only place it doesn't work is in ie. Everything shows up as it should, but none of the movements happen. I'm not even sure where to start. Thanks for your help! Here's the non-codepen version if that helps: http://aprendagames.com/stock/error_pages_robot/headlessRobot/?errorcode=404
- 3 replies
-
- ie
- internet explorer
-
(and 1 more)
Tagged with:
-
Hi Here is the part of my tween that I have problem with : rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule if (scId==1) {var color="#2a2a2a"} else {var color="#f2f2f2"}; if (scId < currentslide) { TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); } and I have this css code : #sctrl table {width: 135px;height: 5px} #sctrl table,tr,td{border:1px solid #f2f2f2;border-collapse:collapse;padding: 0px} @media screen and (min-width: 1358px){ #sctrl {width: 120px;height: 6px;bottom: 25px} #sctrl table {width: 120px;height: 5px} #sctrl td {width: 60px;height: 5px} #sc {width: 60px;height: 6px} } the border color animates fine in chrome but it doesn't work in IE10. the interesting part is if I remove the mediaqueries in the css it will work in IE too. I wonder where is the problem ? the second question is I use multiple tweens at the same time and it's very slow in chrome. I tested in a few computers with chrome and in all of them it was slow. but if I remove this line of animations the speed will be very faster (more than twice): TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); what is your solution ? http://codepen.io/aminfa/pen/lnkCJ
- 5 replies
-
- border color
- mediaqueries
-
(and 2 more)
Tagged with: