Jump to content

Search the Community

Showing results for tags 'bug'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 71 results

  1. Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome
  2. Hey guys, long time no see I'm getting back into GSAP and came across something that I think is a bug. I have a very basic container with substantial vertical padding that I'm trying to add `scrollTop` animation that uses GSAP's `throwProps` functionality. However, it seems to be breaking the scroll functionality, presumably due to the substantial vertical padding that I have. Note that you need to click/drag or touch/drag to have this behavior come into effect. Am I doing something wrong or is this a bug? P.S. How do I do inline code formatting in this editor?
  3. I put the following CDN code in my HTML file and then executed TimelineLite function in javascript. <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script> <My javascript code> start = ()=> { let loader = document.getElementById('loading'), loadContents = document.getElementsByClassName('loading_content'), tlLoader = new TimelineMax(); // Loader Timeline tlLoader .staggerFromTo(loadContents, 0.3, {y:0, autoAlpha: 0}, {y:20, autoAlpha: 1, ease:Back.easeInOut}, 0.05 ) .fromTo(loader,0.3, {autoAlpha: 1, scale: 1.3}, {autoAlpha: 0, scale: 1, ease:Power0.easeNone}, 0.9 ); } start(); Then... the following error appeared in Console. Why is this happening? I guess I add the CDN code incorrectly, so I change to another CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> and tried to use changed TimelineMax to TimelineLite in my javascript code. but this problem is still happening now. plz.. help me
  4. Hi, When I try to splitText a text (by lines) with nested tags, it works correctly. But when the font size of the nested tag is different than the rest of the text, it doesn't work anymore. The nested tag is wrapped in a line (alone). I tried to update SplitText to the latest version (0.7.0) but the issue is still there. Thanks, Valentin
  5. Hi, So this is a simple rotation animation that works well on all browsers but Safari. Can't figure out why this is happening. Any ideas? (Chrome for desired results, Safari for wrong ones) Thanks!
  6. Hi, I find out very bad performance issue when I am animating more SVG elements together. I have some knowledge how browser rendering performance works and then I discovered thru DEV timeline that it is layout trashing. You can try test it on live site here https://storyous.com/cz/ (animation in top banner) Here is a timeline bottom purple colls are like a usually layout trashing looks I investigated more. First I was very surprised that every svg transform animation going thru attribute. I saw some time before that svg animation went with style transform also like normal html node. After few minutes I find out why. https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/CSSPlugin.js#L1200 It is some workaround. Do somebody know why? From comment it is not clear. Layout trashing is caused by reading BBOX https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L4293 and after setting attribute https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L4307 in loop with X elements In code should by some workaround like FastDom https://github.com/wilsonpage/fastdom Can somebody look on this issue? Can I help with something? Thanks, Michal (michal.matuska@superkoders.com)
  7. I am animating svg elements onto the screen with a simple opacity tween, however the elements look like they jump left 1px at the end of the tween, is there some properties I need to set to allow the SVG elements to tween on smoothly and without this weird jump? thanks in advance
  8. I'm having an issue with text shifting/resizing in Google Chrome. This seems to happen while the parent div is being animated. If you look at the Codepen example, you'll see the text snap to different sizes, and it also looks like it tries to change weights as well. The other thing I've noticed is that the parent container also shifts with the text. I've read other answers about this, but anything I've tried doesn't work. Does anyone have insight on this issue?
  9. Hi GS, This can be a bit of a difficult question; I hope not. I've created a page with 24 different svg GSAP animated "audio players". (see: www.dennisvangaalen.nl/clockworks ) I used the Semplice module in wordpress as a framework with custom javascript for the players (all SVG is code). Now I've noticed that at the edge of some of the players (of the most right column) a strange slowly appearing white flickering pixel line shows up, only when playing the timeline/audio. It's only doing this in Chrome I believe. I found some things about -webkit-backface-visibility: hidden; -Tried to apply that to the SVG's. -Plus did somehting like this (to see if maybe the SVG is not completely stable in width or so.. and some white of the background appears (?)): .column, .row, .content-block, .sections, .content-container, .column-content, .content-wrapper, .container, #content-holder, .is-content, { background-color: #00000 !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; } - But it won't help - The flickering line is not always visible; it has to do with scaling the browser as well - Therefore I think it's most likely something with the Semplice template - Or Chrome webkit I attached a screendump to show what I see; in case you guys don't see anything happen (which would be great some how I believe) Nonetheless I wanted to share this with you, since I'm breaking my head and maybe some one recognises this? Hope you can help or clear things up for me. (and btw– maybe my JS script is not one of the most efficient; it's how I was able to manage to make it work :-)) thanks, Dennis
  10. 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.
  11. 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!
  12. 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)
  13. 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!
  14. 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
  15. 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!
  16. 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.
  17. 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]
  18. 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.
  19. 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!
  20. 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.
  21. 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; }
  22. 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
  23. 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?
  24. 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.
  25. 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!