Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'bug'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hello all. I have been using your fine library to animate a set of banner ads for a client going live soon. Fairly late in this process, a team member discovered a 1 pixel jitter or wiggle only in Safari. We are using Google DoubleClick, and we also have a private viewer to show clients ads. In both cases, after uploading these animated ads, in Safari the ad will shift back and forth by about one pixel while elements in it are animating. To phrase it in a different way, when the ad is on a page within an iFrame, the iframe or possibly the container it's in shifts side to side in a wiggle by about one pixel. The animations display slightly differently in Safari as opposed to Chrome. This is not as significant as the jitter. This has been found in Safari Version 9.0 in OSX El Capitan and Yosemite. I stripped the ad of any client-specific images, text, or information and uploaded it to CodePen to try and isolate what's going on. I also had to strip out all the DoubleClick specific code because CodePen would not allow it to run with that code. I really have to apologize because this is very ugly at the moment as I try to debug this. So far I have not been able to get the iframe to jitter in CodePen. However in the "Details" view, the animation is affecting the font weight of the page header text! I feel like this is related. I am at wits end. I'm hoping that if you look at it here and can understand why the font is changing during animation, it will help me understand why the ad is affecting its container during animation in Safari. EDIT: To be clear, right now the behavior I'm asking for help debugging is in CodePen, that the font weight of the header in the top left is flickering during the animation of my banner ad. I think this must be caused by the same thing that is making it jitter in Google DoubleClick preview and in our internal adviewer page, which also uses iframes. Any help would be much appreciated. Best, Stephen Link: http://codepen.io/stevium/details/WQdEyG/
  2. Adding any < or > characters to a text causes these characters and anything enclosed between them to be omitted from the resulting text. There is also a related issue where <br> causes an exception in SplitText.js:206.
  3. I think I stumbled on a bug trying to rotate text elements in SVG with Greensock... It completely ignores the rotation of the text for both the house and the sun... TweenMax.set(sunDegreesText,{rotation:degrees,transformOrigin:"50% 50%"}); TweenMax.set(houseDegreesText,{rotation:degrees,transformOrigin:"50% 50%"}); Any ideas?
  4. We're encountering an issue using Draggable on a multitouch table (WIndows 8 + Chrome), but it also seems to happen on Android Lollipop, so it's probably a general issue. When dragging an item and you use another finger to tap shortly on the same item, it will be suspended in place, not firing the proper events for ending a drag (onDragEnd, onRelease). Snapping and throwprops will also not work. The issue is easy to reproduce using the sample on https://greensock.com/draggable. Enable the checkbox for "snap end position to grid". Start dragging one of the squares and then shortly tap on it with another finger. When you release, the square will not snap to a position on the grid. Has anyone encountered this and found a way to fix it? Should I file an issue somewhere?
  5. I have been working on a 2d/3d transition effect module, and I have been running into some issues integrating with gsap (TweenLite). Most of the Tweens require updating on every $("window").resize() function if they have any media queries. Unfortunately I have been running into issues overwriting TweenLite.to's that involve rotations. A good example of this is a simple "hamburger" icon animation. In the below codepen is a decent example of the issue. If you resize the window while the button is in the X state (or navState = 1) the rotation tween acts as though its stuck in the tween.progress=0 state; http://codepen.io/anon/pen/MwYmVW By changing rotationZ: to rotation: the tween rotation get stuck in the tween.progress=1 state. http://codepen.io/anon/pen/MwYmxa If anyone can shed some light on this issue it would be much appreciated. Thanks, Daniel
  6. Hi, This issue has been bugging me for the past few hours, but I've managed to point it down to the new lines Illustrator adds to SVG files when there are a lot of points and the lines become too long. Maybe it's an option I've been overlooking and I can turn this behaviour off, anyhow these new lines Illustrator adds on points changes the start/ending positions on SVG paths. I've added a codepen, the SVG file gets injected on the place of the img tag with an modified version of SVG Injector (https://github.com/iconic/SVGInjector) I'm not sure if this is a GSAP problem or a bug in Chrome. But it might be worth looking into. Kind regards, Mark
  7. So I've been struggling to figure out how to resolve this issue and figured there has to be some kind of resolution to this by now as I've seen people reporting this bug with chrome for years it seems like. I managed to get it working in Firefox and IE, haven't checked anything else. Although Ie has issues with unset SVG Widths and Heights so it seems like I need to setup a backup script to set that on load for IE. But this is driving me nuts. I just want to animate some simple clouds through a background. The only problem is the clouds are using an alpha mask which won't seem to animate. Also this isn't the final animation, I am just trying to get it to work before I spend more time on it. Any help would be greatly appreciated! Thanks.
  8. I've been working on a project for several months now, and had been using an older version of GSAP for animations, largely to scroll the site up and down to specific sections when the user clicks the navigation. I recently updated from beta 1.5 to the latest ( 1.8.2 ) and noticed that the site no longer scrolled properly: the scroll animation will start and get about 20-50px and just stop. This only happens in Safari/ML 10.8.2. I used BrowserStack to version test, and Safari 6.0.2 in Lion works just fine. To debug, I set an onUpdate function to log the $( window ).scrollTop(), and it seems as if the tween fails at setting the window's scroll, but continues to run fine: I was able to solve my problem by just reverting back to 1.5, but I wanted to send a bug report.
  9. Hello! I noticed that if I use SplitText on a div containing text, and that div has a class defining a font, than Splittext will fail in creating the lines array, making an array of lines that is pretty much wrong: the lines are always too long or too short, never correct. I've made a small example in codepen up there: can you tell me if I'm doing something wrong? Cheers! Alex
  10. I've come across a bug when applying a transformation on an already rotated element with 3d rendering enabled: You can see the codepen for the live preview I have an element with 180deg rotation and Z transform: <div id="aa" style="transform:rotate(180deg) translateZ(10px)">I'm rotated 180 Deg</div> // On Webkit/Gecko this happens only with z > 0, On IE it happens also with z == 0 And then I run some transform animation on it TweenMax.from('#aa', 2, {x:'+=100'}) The result is that the rotated div flips back to 0 degrees, or, from matrix(-1,0,0,-1,0,0) it transforms to matrix(1,0,0,1,0,0) This does not happen on other rotation angles.
  11. Bug or feature? When I tl.seek() a paused timeline the animation is "updating" yet the onUpdate function is never called. See plunk.
  12. When reverting a SplitText operation any trailing line breaks are removed from the text, causing a different result: http://codepen.io/patrickklug/pen/Deiba
  13. 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.
  14. 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!
  15. 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. <
  16. 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.
  17. 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.
  18. 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
  19. 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
  20. 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
  21. 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.
  22. 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!
  23. 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.
  24. 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
  25. 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