Search the Community

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!

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.

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]

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.

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!

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.

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; }

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

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?

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.

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!

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?

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?

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.

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.

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!

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

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});

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.

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?

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/

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.

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?

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?

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