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. Here is a bug when playing 3d animation. U can see everything in the screenshot and on a simplest pen. I trying to solve the problem for 3hrs already Issue tested only on IOS 10 Safari.
  2. I noticed that very specific to Apple iOS mobile devices using the Safari browser on mobile, using the animation effect marginRight for background elements having a background-image with repeat-x seemed to have a stuttering effect. When viewed in desktop browsers and browsers other than Safari, the stuttering effect on the background repeated element is not seen. Is it because of one of the CSS effects I applied, which is the width != 100%, or is it the way GSAP JavaScript code is written? Please kindly view the Codepen attached. All good helpful feedback appreciated!
  3. Hello. function moveCard(card, userIndex, winner, image) { if(!card) return; _injectCircularServices(); var game = BCStage.getGame(); _clearCardColorTimeouts(card.id); _disableMyCards(true); self.childCount = self.childCount % 4 + 1; if(self.childCount == 4) { self.bitaIndex++; } self.bita[self.bitaIndex] = self.bita[self.bitaIndex] || game.add.group(); var bita = self.bita[self.bitaIndex]; bita.add(card); _dealPositions(userIndex, self.usersCards[userIndex].children.length, card.id, false); self.usersCards[userIndex].remove(card); _bitaWatcher(bita, BCUsers.transformSit(winner)); if(image) { card.loadTexture(image); } BCSound.card_drop.get(); var isTabInactive = document.hidden ? 1 : null; var positionX = BCConfig.dealPositions[userIndex].positionX; var positionY = BCConfig.dealPositions[userIndex].positionY; var cardAngle = (card.angle < 0? -1: 1) * BCConfig.dealPositions[userIndex].angleInTable; card.width = 106; card.height = 143; card.angle = cardAngle; if(isTabInactive) { card.scale.setTo(0.9, 0.9); card.x = positionX; card.y = positionY; if(self.childCount == 3 || winner) { _removeBita(); } return true; } else { var cardScaleTween = new TweenMax.to(card.scale, 0.45, {scale: 1, ease: Power3.easeOut}); var cardPositionTween = new TweenMax.to(card.position, 0.8, { x: positionX, y: positionY, ease: Power4.easeOut}); var cardTweenLine = new TimelineMax({paused: true}); cardTweenLine.add(cardScaleTween, 0); cardTweenLine.add(cardPositionTween, 0); if(bita.children.length > 1) { bita.forEachAlive(function(_card) { cardTweenLine.add(TweenMax.to(_card.position, 0.4, { x: _card.x + makeMinusOrPlus(randomBetween(1, 6)), y: _card.y + makeMinusOrPlus(randomBetween(1, 6)), ease: Power0.easeNone}), 0.465); }, game); cardTweenLine.add(TweenMax.to(card.position, 0.4, { x: positionX + makeMinusOrPlus(randomBetween(1, 6)), y: positionY + makeMinusOrPlus(randomBetween(1, 6)), ease: Power0.easeNone}), 0.465); } bita.add(card); cardTweenLine.play(); } if(self.childCount == 3 || winner) { setTimeout(_removeBita, 950); } } This code is tween a card. but if you fast clicking on the card (the object that start tween) sometimes animation "breaks" This function called only one time (called on socket response which is once a time)
  4. Okay I'm fairly new to GSAP but I think I've found a bug. Maybe I'm using something wrong or maybe it's a bug. Whatever it is I wanted to just highlight it to the GSAP experts incase it really is a bug and not me using the animation library incorrectly. First and foremost I should Tell you that I've tested the codepen animation on ALL major browsers. The animation works correctly on IE, Edge, Chrome, Various Mobile Browsers. The only browser that doesn't render the animation correctly is Firefox. I'm using the latest version of Firefox by the way. Okay so the bug I'm referring to is the various "Eyes" that are following a path (I've highlighted the path for your convenience). The eyes are not following the path correctly on Firefox. What I wanted was to make the eyes appear from one mobile and go into the other mobile. This is happening on all browsers except firefox. I apologize for the long SVG code. The two paths I'm using for this are found at the very bottom of the svg code. One path for the "dollars" and the other for the "eyes". The relevant javascript code for this is from line 1 to line 16. Thanks!
  5. Hi, I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again. Is there any way this can be fixed? Any help would be really appreciated. Many Thanks! Ali
  6. Hi, Thank you very much for all the help with I ultimately decided to give this another shot a different way -- which was re-using the existing HTML structure we have in our app and taking the class-based animations and putting them in GSAP. What I've noticed (from the CodePen URL) is that the `min-width` property is not resetting back to 100% in IE11 and Edge. If you try that demo in Chrome, Safari, or Chrome, things work as expected, but it stays at that "complete" value I have in the tween. Any help would be great appreciated as this doesn't suffer from the resize-jitters the other example I had did. Thanks!
  7. I have a little animation with the morphSVG plugin and would use the precompiled calculations for performance optimizing. So i use precompile: "log", but in the console is nothing to see. Same on shapeIndex: "log". I was wondering why - it seems correct to me.
  8. I found a bug in the latest 1.19.1 where relative changes won't work anymore. See the next 2 jsfiddles. https://jsfiddle.net/ufnup8rx/ [Working 1.19.0] https://jsfiddle.net/ufnup8rx/1/ [Fail 1.19.1]
  9. When calling TweenLite.killDelayedCallsTo on a method of an object, all objects with the same prototype will have there delayed calls to that method killed. Cause: When no scope is bound to the method, the method is really the same function object shared by all instances of the prototype. So they will all be killed by 1 call. Solution: Bind your callbacks using .bind(this) or use a closure and place the bound function/closure in a variable. Then, later you can call TweenLite.killDelayedCallsTo on the bound callback. A second argument in TweenLite.killDelayedCallsTo for specifying scope would also be nice, just like with the onCompleteScope etc in TweenLite.to/.from. That would save us a lot of binding and storing functions, and would be in line with the other static TweenLite methods.
  10. Hi all! I'm noticing an issue with GSAP merging in transform properties originally formed in the CSS. I've attached a CodePen to show the issue. In Chrome, you'll see that both Dropdowns align to the center as intended. But in Firefox, IE11, and Edge -- it looks like the transform matrix that is generated is not including the calculated width of the dropdown component when transitioning. We can't use fixed widths (in the example that works) for a certain application, and found it really odd that only Chrome and Safari are handling this alright. Let me know if you need anymore info. Thanks as always!
  11. I forked this off of codepen. http://codepen.io/magalhaespaulo/pen/OyQeQv But mine does not render correctly on iOS. The road and clouds rotate correctly, but the city is way off on iOS. I am trying to get it to work so I can use it on a banner ad.
  12. Hi, I created this page several months ago and everything was working great on all major browsers. Now when I check it on chrome and click on "See their time fly", it will start the animation and look good until it starts to render weird and only show part of a photo. Eventually it just kind of breaks. Do you have any idea why this is happening? This page continues to work great on Safari and Firefox. Here is my code: var photoItem = $('.photo_item'), groupOne = $('.group-one .photo_item'), groupTwo = $('.group-two .photo_item'), groupThree = $('.group-three .photo_item'), groupFour = $('.group-four .photo_item'), groupFive = $('.group-five .photo_item'), beforeLastPhoto = $('.photo_item.mod-before-last'), pulseEl = $('.photo_item.mod-last'), lastPhoto = $('.photo_item.mod-last'), currentItem = 0, rotateValues = ["-20deg", "20deg", "-10deg", "10deg", "0deg"], widthOffset = 100, heightOffset = 100, containerWidth = $('.photos').width() - widthOffset, containerHeight = $('.photos').height() - heightOffset, masterTimeline = new TimelineMax(), replayTimeline = new TimelineMax(); Draggable.create(photoItem, {type:"x,y", edgeResistance:0.2 }); $('.js-btn').one('click', function(){ start(); }); $('.js-restart-btn').on('click', function() { restartTimeline(); }); function start() { $('.js-btn').addClass('is-not-visible'); $('.js-restart-btn').addClass('is-visible'); masterTimeline.set(photoItem, { clearProps:"zIndex" }) .add(beginGroupOne()) .add(beginGroupTwo(), "-=.7") .add(beginGroupThree(), "-=.5") .add(beginGroupFour(), "-=.3") .add(beginGroupFive(), "-=.05"); } function beginGroupOne() { var tl = new TimelineMax(); groupOne.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupOne, 1.25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .5, 0); return tl; } function beginGroupTwo() { var tl = new TimelineMax(); groupTwo.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupTwo, .75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .3, 0); return tl; } function beginGroupThree() { var tl = new TimelineMax(); groupThree.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupThree, .5, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .2, 0); return tl; } function beginGroupFour() { var tl = new TimelineMax(); groupFour.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupFour, .25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .1, 0); return tl; } function beginGroupFive() { var tl = new TimelineMax(); groupFive.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupFive, 1.75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, 1, 0); tl.to(beforeLastPhoto, 1.75, { x: -65, y: 115, xPercent: 0, yPercent: 0, scale:1, rotation: -20, autoAlpha:1, ease: Expo.easeOut }, "-=.5") .to(lastPhoto, 1.75, { x: 0, y: 0, xPercent: -50, yPercent: -50, scale:1, rotation: 10, autoAlpha:1, ease: Expo.easeOut }, "-=.5") .addCallback(finished, "+=1"); return tl; } function moveOff() { var tl = new TimelineMax(); tl.to([groupOne], 1.5, { yPercent: -1000 }, 0) .to(groupTwo, 1.5, { xPercent: -1000, }, 0) .to([groupThree, beforeLastPhoto], 1.5, { yPercent: 1000 }, 0) .to([groupFour, groupFive, lastPhoto], 1.5, { xPercent: 1000 }, 0); return tl; } function finished() { pulseEl.addClass('is-animating'); } function restartTimeline() { masterTimeline.set(photoItem, { clearProps:"zIndex" }) pulseEl.removeClass('is-animating'); replayTimeline.add(moveOff()) .addCallback(restart); } function restart() { masterTimeline.restart(); } function getRandomRotate() { return rotateValues[Math.floor(Math.random() * rotateValues.length)]; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
  13. Hello, I'm working with TweenLite to change an image's attributes. I've found that if I use a .to() to change the "src" attribute of an image, and the filename is something like "a1-1.png", then the .to() operation inserts a comma into the filename!? It comes out "a1,-1.png". This may happen with other attributes for other tags, but I ran into it with img-src. Here is a short example that uses jquery v2.2.2 and TweenMax to move values around: <body> <p>The src of the image is to be changed to "<span id="imagesrc1"></span>".</p> <p>When that is copied in with TweenLite.to(), it becomes "<span id="imagesrc2"></span>" with a comma in it.</p> <img src="a1-1.png" id="image1" /> <script> // Get the src of image1 var src1="a1-2.png"; $('#imagesrc1').html(src1); // Use TweenLite to change the src of the image to that value TweenLite.to($("#image1"), 0, {src: src1}); // Now get the image's src value var src2=$('#image1').attr('src'); // Display the two values. src2 got a comma from TweenLite $('#imagesrc2').html(src2); </script> </body> I am working with TweenMax.min_1.18.2.js on a Firefox browser. Using the DOM inspector of the browser, the image src is seen to be the value with a comma in it -- this isn't jquery misreading it. Anyone else able to reproduce this? Debug it? Thanks, -Mark
  14. Hi. First of all - I welcome me in GSAP community The second thing, that I have a problem with GSAP timeline functionality (check the codepen). Is it a bug? When second timeline is removed, in my opinion, it should not reserve the time for it. Especially not after invalidate(). Any suggestions for workarounds?
  15. Lagden

    Bug Safari 9.1

    Hi, I was testing and I found a problem on Safari 9.1 1.18.2 - ok: http://codepen.io/lagden/pen/PNyLKR 1.18.3 - fail: http://codepen.io/lagden/pen/reqoZY It is the same code, just change GSAP version. Well, I did a downgrade to solve! Basically, in version 1.18.3, matrix isn't working on Safari.
  16. Hi, I have a problem with a version 1.18.3 Here is a codepen with 1.18.3 in action http://codepen.io/anon/pen/PNdQdO and here is a same code with 1.18.2 in action http://codepen.io/anon/pen/reZJKE First I have tried to fix my code, which was working before and later i have realized that I have updated TweenMax version. After switching to 1.18.2 everything works fine as before. Is something changed so I need to change my code or this is a bug? Thanks!
  17. As you can see in the attached codepen, I want to make a small hover effect. after looking through some docs on both Jquery and GSAP, it still is not working. Is there something I'm doing wrong?
  18. I had this strange bug in a game I was making that caused the player to be able to click twice on a button, even though the event listener removed itself which should have prevented the second click. After spending many hours on this I've managed to boil it down to what I think is a bug in how TimelineLite handles call() Here's an example: var obj = {value: 0}; var timeline_1 = new TimelineLite({delay: 1, onStart: function() { console.log("timeline_1 start") }, onComplete: function() { console.log("timeline_1 complete"); }}) .to(obj, 0.5, {value: 1}) .add(function() { console.log("function 1"); timeline_2.play(0); }, 0.4) var timeline_2 = new TimelineLite({paused: true, onStart: function() { console.log("timeline_2 start") }, onComplete: function() { console.log("timeline_2 complete"); }}) .to(obj, 0.5, {value: 0}) .add(function() { console.log("function 2"); timeline_1.play(0); }, 3); The first timeline tweens an object's value to 1 during 0.5 seconds, and calls a function after 0.4 seconds. That function goes on to play the second timeline (previously paused). The second timeline starts tweening the same object's value back to 0 (0.1 seconds before the first tween is done, causing an overlap), and after 3 seconds calls a function that plays the first timeline from 0 again, effectively creating a loop. The expected behaviour (for me at least!) is that the tween on the second timeline will overwrite the first, cutting it a little short. What actually happens is that the first timeline's call() function runs twice right after each other (logging "function_1" twice to the console), even though the first timeline is only started once! This only happens when the two tweens overlap. If I nudge the function calls and/or tweens so the second tween doesn't overwrite the first, the problem is gone. The same goes for when I have the second tween affect some other unrelated value instead: no problem. Have I misunderstood something here, or is this in fact a bug?
  19. Hi Carl, It's me again. I have been coding an animation using GSAP recently and I came across a case that works fine in Chrome and Firefox but act strangely in IE including IE11. I eventually found a workaround but I thought maybe it would be something that the GSAP team want to take a look into. The problem appears when we have a <div /> with "height:XXpx" and "padding:XXpx 0" and we only want to animate this <div />'s padding to a different size. The truth is that the height doesn't change in the animation at all but... The problem: If we provide only the target padding, all the browsers including IE act normally with correct animation, but as soon as we also provide the target height which is practically the same as the initial height, IE animation gets ruined (other browsers still work correctly). When one inspect the elements, it can be seen that the height is being decreased during the animation in IE and comes back to normal at the end. Workaround: Not to include the height in the parameters, but this only works if we don't want to change the height during the animation. *) One thing that might or might not be the reason is that I have used a <svg /> element directly inside the <div /> which is being animated. Thanks for your attention in advance.
  20. Hi everyone, This is my first post here. First I want to say thank you to the people who provided these absolutely amazing animating tools for web which make the web a more fun place to code for. Then I think I have found a bug in the animation flow which at least exists in TimelineMax but I am suspecting the source to be in the TweenLite as to my understanding is the origin for all the animations. The problem: When I make a TimelineMax object and add TweenMax.to() animations to it, if the animation is done only on standard HTML elements things will work flawlessly, but as it can also be seen in the CodePen I provided, when I have a SVG element with its children elements, if I want to animate the children elements in the middle of a timeline two things will happen. 1) The SVG elements animation order will be missed up and will not work correctly. 2) The animation on the standard HTML elements will not wait for the SVG elements animation to be finished. In other words, the animation on the standard HTML elements registered after the SVG elements will be started on the same time as the first SVG element's animation. I have reviewed the order and timings several times and I think they are correct. I have also written the code several times from scratch to make sure that I am not messing anything up. It would be really nice if you can figure this bug out and release a new bug-fix version. I am currently working on a project and I really need this feature to word correctly. Thanks in advance.
  21. Hi guys! I have the following problem: There is a draggable with attached methods onPress and onRelease. The draggable component has a button child. When I click on the draggable but outside of the button both events get fired. But when i click on the button only the onPress event gets fired (you can check this in the browser console). Same result happens if I put an input as a child and click on it. Codepen: http://codepen.io/anon/pen/jqqyEQ I need a way to fire both onPress and onRelease events when I click on buttons and inputs that are children of the draggable component. Thanks in advance!
  22. Hy guys, I love your library since the Flash times I just found what I think is a bug. In the codepen link there is an example. If you tween a class which name is contained in another class, the part of name of tweened class was subtracted on the other class <div class="open-sub" id="tween"></div> if I tween a class with the name "open" TweenMax.to("#tween", 1, {className: "+=open"} ); // +=open or -=open produce same bug the "open-sub" class will become "-sub" Nothing breaking, but could lead in a very tricking result
  23. I've come come across a strange behaviour that I would like to understand. It might be bug, but I'm not sure. When setting immediateRender to true I would have guessed that onUpdate would also fire once during that initial render, but it seems to depend on the type of tween involved. .to fires the onUpdate while .from and .fromTo doesn't. Example: var obj1 = {a: 0}; var obj2 = {a: 0}; var obj3 = {a: 0}; // logs "update1" TweenLite.to(obj1, 1, {a: 1, onUpdate: function() { console.log("update1"); }, immediateRender: true, paused: true}); // logs nothing TweenLite.from(obj2, 1, {a: 1, onUpdate: function() { console.log("update2"); }, immediateRender: true, paused: true}); // logs nothing TweenLite.fromTo(obj3, 1, {a: 0}, {a: 1, onUpdate: function() { console.log("update3"); }, immediateRender: true, paused: true});
  24. I have found what seems to be an inconsistency when cancelling tweens. Please see the attached codepen for a demo. Usual Behavior: When TweenMax.set is called while another tween is running, the already running tween is cancelled (when they affect the same values) The Possible Bug: When that initial tween is called, but it hasn't "started", the cancellation does not occur and TweenMax.set is effectively called before the former tween even though it occurs after. Edit: I updated the codepen to work and to make more sense.
  25. OxXxigen

    GSAP VS MooTools

    sorry for bad english. If use mootools and try to change "position" attribute, autoCss function GSAP detect "position" in target and don't add it to vars.css, becouse mootool add "position" method to Node prototype. i fix it in my local machine, but... where can i write, to fix it in future?