Search the Community
Showing results for tags 'bug'.
Found 102 results
-
Bug or feature? When I tl.seek() a paused timeline the animation is "updating" yet the onUpdate function is never called. See plunk.
-
When reverting a SplitText operation any trailing line breaks are removed from the text, causing a different result: http://codepen.io/patrickklug/pen/Deiba
-
I stumbled upon a weird behaviour of clearProps, and couldn't find any reference to whether it is a bug or not. When using clearProps with explicit values the order of the parameters passed has importance when clearing mixed transforms/properties values. This will clear x and y and skip opacity - clearProps:'x, y, opacity' This will clear only "opacity" and skip x and y. clearProps: 'opacity, x, y' Same goes with other non transform values like "clip" See the codepen for clearer example.
-
Hi guys, At the moment I'm working on a rotator that rotates between 3 tabs with a 3D perspective (middle tab in the front and 2 on the sides that are in the back). It's all working fine on the platforms and browsers I've tried except for Chrome (both Windows and Mac). The problem there is that one of the side tabs is not rendering on the Z axis while if you inspect it in dev tools the overlay shows the tab in the right position. Here is how it is supposed to look: http://puu.sh/bAamR/98bab7014e.png Here is how it actually looks: http://puu.sh/bAaod/da2a27ac77.png And here is a working demo file I've put online: http://lwigchert.nl/test/demo_issue.html It might be an issue with the z-index because when you play around with that the tabs seem to switch. If there is anything else needed that may help, let me know!
-
CodePen (I don't think this site supports IE8, so this may not be useful): http://codepen.io/anon/pen/kxhfD Problem Opacity isn't animated when there is an x-translation in Internet Explorer 8. Code // no opacity animation in IE8, works in modern browsers var element = document.getElementById('box'); var animation = { x: -50, opacity: 0 }; TweenMax.from(element, 1, animation); a Extra note If you replace the x with marginLeft, the opacity correctly animates. > Thank you so much for all the hard work, guys. It's really, really appreciated. <
-
Ok, I don't know this is a GreenSock bug or not but this happens a lot. When tweening the opacity of several divs and/or images at the same time, sometimes some divs/images disappear while- or after the tweening is done. The solution is very simple, instead of tweening the opacity to the value of '1', I use a value of '0.99'. And everything is working fine again. I found out this a solution for Firefox and FireFox Android. I don't if there are more browser with the same problem out there, but this might help.
-
So i'm currently working on a page that has animation when you scroll down the page using scrollmagic and tweenmax. I've pinned the appropriate sections and created the animation, and everything works perfectly. I then added some javascript to have a show/hide function for the different features in a sticky nav (instead of having a long vertical scrolling page, it swaps out content within the same area). I noticed a very weird bug when I switch between the different sections. Here's a screenshot of what the bug looks like when I go back to the original section with the animation. It seems as though the tweenmax plugin is ignoring all of my css and completely breaks. What's even weirder is that when you start to scroll down the css is restored. Any ideas on what this is? I can't seem to figure out what's causing it.
-
Hi, I don't know if someone can help me but here's my bug. I used TweenLite to make a small 3d transition to show a box. The box itself is slightly rotated using css3 transform:rotate properties. When the tween finish, the box has a weird position glitch. It move down a little bit. If i remove the rotate properties, everything is fine. Here's the CodePen : http://codepen.io/anon/pen/JyLAt I've seen this glitch in all Major Browser Sorry for my english, is not my native language. Thanks in advance for your help
-
Hi guys, I have a problem with The TweenMax.killAll(true) method. Here is my example: TweenMax.to(targetQ, 2, { scaleX : 2, scaleY : 2, reversed : true, yoyo : true, repeat : 1, x : targetQ.x + (targetQ.width - 2 * targetQ.width) / 2, y : targetQ.y + (targetQ.height - 2 * targetQ.height), ease : Back.easeOut, onReverseComplete : function onReverseComplete():void { trace("complete this tween ;)"); } } ); If you make a reversed tween, it's never call the onComplete function. The tweenax documentation write this: " onComplete : Function – A function that should be called when the tween has completed. To sense when a tween has reached its starting point again after having been reversed, use onReverseComplete." If I call TweenMax.killAll(true), tween not killed!!!!! As I see, the problem is in the killAll method. Inside this, here's a line: isDC = (a.target == a.vars.onComplete); Unfortunately, if you set a reverse to a tween, onComplete callback ignored! cheers, jax
-
I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
-
Hi there, i'm trying to do a basic animation for a button and it's not working when i put my code on my website. Here's the CodePen page(it works here): http://codepen.io/anon/pen/KnfLk When i drop that code in my website i get this: Nothing happens basically, and even the console.info doesn't work.
-
Hi, The new Chrome has a matrix3D bug and the solution would be to set -webkit-transform: perspective(xxxx). I tried to use the TweenLite.set(element, {transformPerspective:500}); but isnt working. Also if i add manually the gsap removes it when the animation starts. If you check this: http://demo.minic.ro/modules/isntauro in chrome you can see the bug. The solution is to add the transform perspective to the ".back" element. Any help would be great! Thanks!
-
Hi, I would like to report a bug found using Draggable (great library!), hope this is the right place. If you drag an element (x,y) inside a parent that has been previously rotated, then this.x and this.y values inside the onDrag callback refer to horizontal and vertical directions, ignoring the fact that the parent is rotated. The result is that if, for example, you rotate the parent by 90deg, when you drag the child horizontally it moves vertically and viceversa. The fix however seems easy. Let's say we have the angle of the parent rotation expressed in degree in the variable 'angle'. Then inside the callback onDrag: angle = - angle * Math.PI / 180; var cosAngle = Math.cos(angle); var sinAngle = Math.sin(angle); var relativeX = (this.x * cosAngle) - (this.y * sinAngle); var relativeY = (this.x * sinAngle) + (this.y * cosAngle); relativeX and relativeY are now the corrected values relative to the parent of the Draggable element. Hope this could be useful. Thanks for your great libraries.
-
Hi ! I'm using Chrome Version 31.0.1650.63 on OSX Maverick and I've noticed some jittering/tearing on the basic animation. For a fast animation you can not really notice it, but with middle slow animation such as this ones : http://codepen.io/GreenSock/full/Kajpu it is getting annoying. The issue can simply show with something like : TweenMax.to($el, 10, { x: $(window).width() + $el.width(), onComplete: function() { $el.remove(); } }); I didn't notice it on previous beta version... and I can not say when I see it appearing on the first time. What I can say, is that I see it on Firefox (last version) and Safari (last version) Thanks
-
Hi, first of all i love the Engine. I use the latest 1.11.1 engine. Today, after the FireFox 25 Update has been released, we get 2 very strange effects in Firefox on MAC. 1. Some Easing (like power3.ease..., power4, power2..) adds a black background for Transparent PNG Images. If i change this easing to linear or i.e. Back.easeOut the black bg disappear. Live: http://www.themepunch.com/codecanyon/revolution_wp/fullwidth.php (slide 2) See Video also: http://screencast.com/t/JiQap5oBlW 2. In Firefox the Animated Iframes with Vimeo Videos in it are not Clickable. Only in Firefox, only on PC. If i remove greensock animations of the iframe, videos are clickeable. See live: http://www.themepunch.com/codecanyon/revolution_wp/fullwidth.php (at slide 4 and slide 5) Any tipps or advise would be great ! Thanks a lot, Krisztian from ThemePunch
-
Tested on Window and Mac, I have the same issue for Firefox, the margin & padding isn't animated. http://jsbin.com/UGOSEGO/16/edit?html,output
-
I've been having an issue using TweenMax and setting the css properties of an element. It seems to be automatically picking out a z-index and applying it to the style of the element. I'm assuming this is something that was added as a quick fix for performance or css3 animation flickering as backface-visibility is also added without me requesting it (which is a whole different issue and really bogs down performance on iOS Safari). The code is: TweenMax.set(element, {css:{y:0}}); This ends up being: <div class="header" style="z-index: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate(0px, 0px); ">...</div> The problem is the z-index on the style attribute is overriding the z-index i have applied in my stylesheet. And as it sets the value to 0, my element just disappears. I can manually set the z-index in the tween and fix that issue but i shouldn't have to worry about updating that value anywhere other than my css. Is there something that I'm applying improperly? Maybe another parameter that will remove this default behavior (tried autoRound: false but didn't work)? If this is the intended behavior might i suggest getting the element's z-index and applying that value to the style attribute so to not override it to 0. Thank you for this awesome platform. I've been using greensock for such a long time and so glad it made it to JS.
-
Hello! I'm building up my new Portfolio with your Engine but I have a big problem. It's basically a spinning 3D Cube. I made a a Timeline for each "Spin" and i just Start and Reverse those Timelines. But sometimes when i press the reverse button everything gets messed up. (Attechment). The Timeline im reversing should animate 2 divs. but only one div works correctly. You can try it out yourself at http://deesr.com/ . Just go to the second page, open a few "Colors" and then go back to first page. In some cases it works, but sometimes it doesn't, what makes it even harder to fix.
-
Hi, I just encountered a bug in Chrome (possibly other browsers too) leaving 1px trash during 3d animations, like n the attachment. All you need to do is add 1px border, or box-shadow to the animated element. If you don't want it to be seen - in color of background, or transparent: border: 1px solid rgba(0,0,0,0); border: 1px solid transparent; I hope it'll help someone. John.
-
Hi! I'm having a problem with a webpage. It contains 6 elements that are animated via css for :hover behaviours: .mySel{ -xx-transform: scale(0.8); } .mySel:hover{ -xx-transform: scale(1); } On intro, I need to tween these elements' y position individually, so I use TweenLite: TweenLite.to(this,1,{css:{y:50}}); Problem is, when my tween finishes, the tweened elements have inline styles overriding my :hover behaviour: -webkit-transform: matrix(0.8, 0, 0, 0.8, 0, 0); I see why jack did this but I'm open to manually resetting inline styles onComplete, but I have no way of using TweenLite to do so. I'll have to deal with vendor prefixes manually. I was wishing for TweenLite.to(this,0,{css:{scale:"" or scale:"none" or scale:"auto"}}) to reset the property but no dice... Can someone help me in any way? -
I found a 'bug'. In case two divs are placed on top of each other and the opacity of both is animated, text in the upper div will dissapear when the tween is completed. I tested this 'bug' in serveral browser and effect was the same overall. The workaround is to set the opacity to '0.99' instead of '1': new TweenLite(myText, 2, {css:{opacity:0.99}, delay:3}); PS. In the bottom div contained a image, the upper div is only text.
-
I am using version 12.0, and I am wondering if this hue situation is a bug, or a limitation. I expect to take a solid colored object, adjust its hue around the 360 color wheel, and get a solid color back, but the colors I get are muddled. The saturation is off. I make a solid green object of 0x00FF00 (100% green). When I adjust the hue by 180, I expect it to go to the opposite side of the RGB color wheel to 100% purple, but it goes to 0xFF6EFF, or 255 for red and blue, as expected, but a green value of 110 (not 0), giving me a muddled purple. Similarly, when I try to adjust the same bright green object to bright red, using a hue adjustment of 240, it is a muddled red. I poked into the code, and see the use of Luminosity constants for R, G, and B at 0.212671, 0.715160, and 0.072169. Perhaps these are not the best constants? Perhaps the algorithm for hue adjustment on line 165 in ColorMatrixPlugin.as in version 12.0 is incorrect? var c:Number = Math.cos(n), s:Number = Math.sin(n), temp:Array = [(_lumR + (c * (1 - _lumR))) + (s * (-_lumR)), (_lumG + (c * (-_lumG))) + (s * (-_lumG)), (_lumB + (c * (-_lumB))) + (s * (1 - _lumB)), 0, 0, (_lumR + (c * (-_lumR))) + (s * 0.143), (_lumG + (c * (1 - _lumG))) + (s * 0.14), (_lumB + (c * (-_lumB))) + (s * -0.283), 0, 0, (_lumR + (c * (-_lumR))) + (s * (-(1 - _lumR))), (_lumG + (c * (-_lumG))) + (s * _lumG), (_lumB + (c * (1 - _lumB))) + (s * _lumB), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]; It is pretty complex, as I assume it needs to be, but could there be something askew in there? If I use a bright green object of 0x00FF00, and adjust the hue value by 60, 120, 180, 240, or 300; I was hoping I could get bright versions of teal, blue, purple, red, yellow. but it appears I can not get bright objects out of the hue transformation function. [in my attached image, I use two identical looking bright green circles, and adjust the right one to get bright red using code, but it does not come out as bright red. TweenMax.to(adjustedSprite, 1, {colorMatrixFilter:{hue:240 }} ); I remember reading about how Flash doesn't always work like Photoshop does, but this is just a color wheel hue issue, no? Thanks in advance, jimmi.
-
Hello, I am experiencing an issue with the GSAP javascript version on Linux Mint 12.04, Google Chrome browser version 21.0.1180.57. The demos I've looked at (included the main javascript GSAP page) fail to work with the following error: Uncaught TypeError: Cannot set property '_overwrite' of null TweenMax.min.js:155 (anonymous function) TweenMax.min.js:155 p TweenMax.min.js:15 p.fromTo TweenMax.min.js:23 initScrollAnimations /superscrollorama/:294 c.render TweenMax.min.js:41 b.render TweenMax.min.js:154 t._updateRoot TweenMax.min.js:158 b.dispatchEvent TweenMax.min.js:141 r The demos work fine on chromium 18 and my firefox browser. Thanks, Aaron
-
timeline.addCallback(function():void { trace(timeline.time()); }, 0); expected: 0 output: 1.1 (or any random number depending on the timeline duration) I know there are events, but this should work too
-
Hello i am making this site, as others can se on my posts: http://temp.agenciacaput.com/Caput/ And it´s working perfectly the animations, BUT, our beloved IE9-, its making things harder... Test the upper menu with IE9- so you can se the bugs, i can´t resume them all... Any help will be most wellcome! Note: Using TweenMax not minified for debug pourposes. On ie 7 trows me an error on TweenMax.js, line 2809 character 7
