Search the Community

Hey all, I'm currently playing with the timeline and setting up a sequence of animations. So far i've used tl.to in my sequencing and all went good. I then wanted to implement .fromTo however that seemed to mess up my timeline. My objective is fairly simple, summarized in the following steps. 1. I do some initial CSS tweening 2. I fade up some text 3. I tween my div to the outer right 4. I change up some text 5. ISSUE: I now want to re-position my div to the outer left and tween it into center again. Ive set up an illustrative codepen example here: http://codepen.io/mrsgs/pen/IeLrF Note: uncomment line 15 to see the issue apply

Quick question: how would we set a repeat for a SteppedEase animation that's sitting inside a timeline? I noticed today that the repeat I had in this sample of code wasn't having any effect: var t1 = new TimelineMax(); t1.from("#object1", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 2, repeatDelay: -0.5 } ) t1.from("#object2", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 3, repeatDelay: -0.5 } ) Is there another way to declare the repeat, or would it be better off creating a set of functions that can set the repeat?

I'm using TimelineMax to create an animation. I add tweens to it with, for example, the to-method. I know it's possible to set a label to a tween on the same line as adding it to the timeline like this: tlMain.to(sky, 2, { alpha: 1}, 'skyIn') ...and how to timeoffset a tween in the timeline by using [label]+=[value] or [label]-=[value]: tlMain // MOVE IN SKY + SNOW 0 .to(sky, 2, { alpha: 1}, 'skyIn') // fade-in sky .to(snow[0], 2, { alpha: 1}, 'skyIn+=0.5'); // fade-in snow 0.5 seconds after moving in the sky But what I would like to archive is: - add tween W with label A - add tween X with a timeline offset to label A - add tween Y with a timeline offset to the last added tween (tween X) ánd setting a new label for this tween ('Label B') - add tween Z wich starts at exactly the same time as tween Y, so the timeline position is 'label B' So I would like to add a tween to the timeline, add a NEW label this new tween and set a timelineoffset to this new added tween at the same time. So no offset to the given label, but an offset to the last tween, while giving it a new label at the same time. I tried a lot and looked for it in the docs and videos (like http://www.greensock.com/sequence-video/) but can't find a solution to this. Hopefuly you understand my question Is this possible?

Hi Guys, I'm wondering can you give me a little help. I'm using TimelineMax within and for loop and the animations are being messed around... basically it looks like everything is being scarmbled CODE: for(var i:uint = 0; i < attackEnemiesToAnimate.length; i++) { enemyToTrack = attackEnemiesToAnimate[i]; createAnimation(enemyToTrack); if(enemyToTrack.x == stage.stageWidth - 20) { attackEnemiesToAnimate.splice(i,1); this.removeChild(enemyToTrack); enemyToTrack = null; } enemyToTrack = null; } private function createAnimation(e:Enemy):void { var tl:TimelineMax = new TimelineMax(); tl.to(e, 0.5, {x:stage.stageWidth - 100, y:50},1).to(e, 0.5, {x:pirate.x, y:pirate.y},2).to(e, 0.5, {x:-stage.stageWidth - 30, y:-stage.stageHeight - 10}, 3); e = null; tl =null; } Any Suggestions Cheers, John

Hi, I'm new to gsap and playing around with grouping animations. I'm struggeling with following: var mtl = new TimelineLite(); function hufPerspective () { var sentence = Huf.html().split(""); var tl = new TimelineMax({repeat:1, repeatDelay:2, yoyo:true}); TweenLite.set(Huf, {css:{perspective:500, perspectiveOrigin:"50% 50%", transformStyle:"preserve-3d"}}); Huf.html(""); $.each(sentence, function(index, val) { if(val === " ") { val = " "; } var letter = $("<span/>", {id : "txt" + index}).html(val).appendTo(Huf); tl.to(letter, 1, {autoAlpha:1, ease:Back.easeOut, rotationX:360, transformOrigin:"50% 50% -20"}, index * 0.05); }); return tl; } mtl.add(hufPerspective(),1); mtl.play(); I can't this getting run. If I remove the 'return' the animation plays as expected, but with the retunr nothing happens. What is my mistake? Thanks. Olaf

Hi guys, I've been trying to work this out but just can't get my head around it. The following needs to happen: - 3 Images - 4 Positions (with 4 values. X, Y, width and height) - Click on the next button - Images rotate. 1 goes to position 2, 2 to 3, 3 to 4, and 4 to 1. My solution (that doesn't work) was as followed: var tlTelefoon = new TimelineMax(); var positions:Array = new Array (new Array(267,136,386,520), new Array(236,138,339,456), new Array(204,139,255,343), new Array(420,134,377,540)); var currentPhone:Number = 1; var phone = new Array("toestel1", "toestel2", "toestel3", "toestel4"); btnNext.onRelease = function(){ if(currentPhone < 4){ currentPhone++; } else{ currentPhone = 1; } animatePhone(); } animatePhone = function(){ for (var i = 0; i < phone.length; i++) { tlTelefoon.to(toestel[0], 1, { _x:positions[0].x, _y:positions[0].y, _width:positions[0].width, _height:positions[0].height}) .to(toestel[1], 1, { _x:positions[i].x, _y:positions[0].y, _width:positions[0].width, _height:positions[0].height}) .to(toestel[2], 1, { _x:positions[i].x, _y:positions[0].y, _width:positions[0].width, _height:positions[0].height}) .to(toestel[3], 1, { _x:positions[i].x, _y:positions[0].y, _width:positions[0].width, _height:positions[0].height}); trace(toestel1); } } In short: - Button is clicked, var currentPhone increment with 1. - animatePhone function is called. - every Phone their values (x,y,w,h) should change an should animate to those spots. Help is very much appriciated! Just can't figure this one out. Maybe I'm just working on it for too long and don't see stupid mistakes. If so, please say so. Thanks! Youri

Hello, UPDATE : I found this answer http://forums.greensock.com/topic/7694-tweento-duration/ that works well. Sorry for the duplicate question. I created a timeline with labels and tweens. It's basically 4 slides (100% height) that move up or down. I have a top menu and when I click on an item I want to move the playhead to the right label so i'm using the myTimeline.tweenTo('labelName') which is working fine. But let's say I'm on my first label and I want to fast forward to the last one when I click on the last menu item. When I do a tweenTo('lastLabel'), it takes a long time before getting there because it's doing all the transitions (with easing). Is there a way to "skip" the transitions, delays, duration to go to the last label. I could change : timeline.timeScale() TweenLite.defaultEase = Linear.easeNone but I was wondering if there was an easier way. Thank you.

hi, i have one doubt regarding adding animation array in timelinemax. Is it efficient if i add array of animation in timelinemax or i add one animation at a time? ..What will it make difference?

Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.

Hey all, Relatively fresh in the web-dev world, really enjoying using greensock! I've been working on the website for my company. One of the features of the site will be a colour chooser/builder, allowing visitors to choose/design there own variation of one of our products (Mountain Bike related in this case). The idea is, you select the colour of the component you want, and it tweens to the select colour. I need it to fade out of the current colour, then into the selected. I've got it working, although the images I have are slightly large and un-optimized at the moment. I've created a demo site here: http://goo.gl/rvuSco so you can see the effect I'm talking about. The issue I've run into, is that when a visitor first comes to the site, prior to anything occurring on the timeLine, the fade out/in tween doesn't function. It seems to just ignore it. I've come up with a fix, by forcing a dummy tween to full opacity when the page loads, but is this correct? all subsequent tweens work great, but for some reason the first one has an issue. I've commented out my fix, to illustrate the issue on http://goo.gl/rvuSco. HTML code with JS: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Go Greensock Go!</title> <link href="/GreenSockForum/css/placer.css" rel="stylesheet" type="text/css"> </head> <body> <div class="fullPage"> <div class="colourSelector"> <div id="ringDisplay"> <img id="ringImg" src="/GreenSockForum/img/ringRenders/BlackRing.png"/> </div> <div id="bashDisplay"> <img id="bashImg" src="/GreenSockForum/img/ringRenders/BlackBash.png"/> </div> <div class="bashColours"> <p>Bash Colours</p> <div class="colourBox" id="squareBlackBash"></div> <div class="colourBox" id="squareRedBash"></div> <div class="colourBox" id="squareGoldBash"></div> <div class="colourBox" id="squareGreenBash"></div> <div class="colourBox" id="squareBlueBash"></div> <div class="colourBox" id="squareSilverBash"></div> <div class="colourBox" id="squareNoneBash"></div> </div> <div class="ringColours"> <p>Ring Colours</p> <div class="colourBox" id="squareBlackRing"></div> <div class="colourBox" id="squareRedRing"></div> <div class="colourBox" id="squareGoldRing"></div> <div class="colourBox" id="squareGreenRing"></div> <div class="colourBox" id="squareBlueRing"></div> <div class="colourBox" id="squareSilverRing"></div> <div class="colourBox" id="squareNoneRing"></div> </div> </div> </div> <script type="text/javascript" src="/GreenSockForum/js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="/GreenSockForum/js/greensock/TweenMax.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(document).ready(function() { var isAnimating = false; var tl = new TimelineLite({ onComplete: function() { isAnimating = false; } }); //tl.to("#bashImg", 0.5, {opacity:1}); //<--Required to fix issue $( "#squareBlackBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/BlackBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareRedBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to($("#bashImg"), 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/RedBash.png'); $("#bashImg").show(); }) tl.to($("#bashImg"), 0.5, {opacity:1}); }); $( "#squareBlueBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/BlueBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareGreenBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/GreenBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareGoldBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/GoldBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareSilverBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/SilverBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareNoneBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); }); $( "#squareBlackRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlackRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareRedRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/RedRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareBlueRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlueRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareGreenRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/GreenRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareGoldRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/GoldRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareSilverRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/SilverRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareNoneRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); }); }); </script> </body> </html> My hack-job lovely css: * {margin:0;} html,body {height: 100%;} .fullPage { position: relative; height:100%; width:100%; box-shadow: 0px 2px 10px; background-color: #FFFFFF; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayc+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9J2cnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBjeD0nMCcgY3k9JzAnIHI9JzQyJSc+CgkJPHN0b3Agb2Zmc2V0PScwJScgc3RvcC1vcGFjaXR5PScwJyBzdG9wLWNvbG9yPScjMDAwMDAwJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1vcGFjaXR5PScxJyAgc3RvcC1jb2xvcj0nIzY2MmYyZicgLz4KCTwvcmFkaWFsR3JhZGllbnQ+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9J2cyJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZScgY3g9JzAnIGN5PScwJyByPSc0MiUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0b3Atb3BhY2l0eT0nLjEnIHN0b3AtY29sb3I9JyMwMDAwMDAnIC8+CgkJPHN0b3Agb2Zmc2V0PSc1MCUnIHN0b3Atb3BhY2l0eT0nLjUnICBzdG9wLWNvbG9yPScjNjYyZjJmJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1vcGFjaXR5PScuOScgIHN0b3AtY29sb3I9JyM2NjJmMmYnIC8+Cgk8L3JhZGlhbEdyYWRpZW50PgoJPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnKScvPgoJPHN2ZyB4PScwJyB5PScwJyBvdmVyZmxvdz0ndmlzaWJsZSc+CgkJPGxpbmUgaWQ9J2wnIHgxPScwJScgeDI9JzAnIHkxPScwJyB5Mj0nMTAwMCUnIHN0eWxlPSdzdHJva2U6I2Q5ZDZjMzsgc3Ryb2tlLXdpZHRoOjIuNDY7JyB0cmFuc2Zvcm09J3JvdGF0ZSgwKScvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC01LjI5NDExNzY0NzA1ODgyMyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTEwLjU4ODIzNTI5NDExNzY0NyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTE1Ljg4MjM1Mjk0MTE3NjQ3MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTIxLjE3NjQ3MDU4ODIzNTI5MyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTI2LjQ3MDU4ODIzNTI5NDExNiknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTMxLjc2NDcwNTg4MjM1Mjk0MiknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTM3LjA1ODgyMzUyOTQxMTc2KScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNDIuMzUyOTQxMTc2NDcwNTkpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC00Ny42NDcwNTg4MjM1Mjk0MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTUyLjk0MTE3NjQ3MDU4ODIzKScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNTguMjM1Mjk0MTE3NjQ3MDYpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC02My41Mjk0MTE3NjQ3MDU4ODQpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC02OC44MjM1Mjk0MTE3NjQ3MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTc0LjExNzY0NzA1ODgyMzUyKScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNzkuNDExNzY0NzA1ODgyMzUpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC04NC43MDU4ODIzNTI5NDExNyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTkwKScgLz4KCTwvc3ZnPgoJPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnMiknLz4KPC9zdmc+'); } .colourSelector { text-align:center; position: relative; background-color: #0c0ceb; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNzYnIGhlaWdodD0nMjc2JyB2aWV3Qm94PScwIDAgMjc2IDI3Nic+Cgk8ZGVmcz4KCQk8cGF0dGVybiBpZD0nYmx1ZXN0cmlwZScgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgeD0nMCcgeT0nMCcgd2lkdGg9JzU1LjInIGhlaWdodD0nNTUuMicgdmlld0JveD0nMCAwIDExMC40IDExMC40JyA+CgkJPHJlY3Qgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0nIzBjMGNlYicvPgoJCQk8cGF0aCBkPSdNMSwxaDExMC40djExMC40aC0xMTAuNHYtMTEwLjQnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlLXdpZHRoPScxLjc4JyBzdHJva2UtZGFzaGFycmF5PScwLDIsMicgc3Ryb2tlPScjZmZmZmZmJy8+CgkJPC9wYXR0ZXJuPiAKCQk8ZmlsdGVyIGlkPSdmdXp6JyB4PScwJyB5PScwJz4KCQkJPGZlVHVyYnVsZW5jZSB0eXBlPSd0dXJidWxlbmNlJyByZXN1bHQ9J3QnIGJhc2VGcmVxdWVuY3k9Jy4yIC4zJyBudW1PY3RhdmVzPSc1JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+CgkJCTxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyBpbj0ndCcgdmFsdWVzPScwJy8+CgkJPC9maWx0ZXI+Cgk8L2RlZnM+Cgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPSd1cmwoI2JsdWVzdHJpcGUpJy8+CjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNmdXp6KScgb3BhY2l0eT0nMC4xOCcvPgo8L3N2Zz4K'); height:85%; width:60%; margin-left:20%; top:10%; border-radius:50px; box-shadow: 5px 5px 20px; } .ringColours { color:white; position: absolute; height:90%; width:40px; right:5%; top:5%; } .bashColours { color:white; position: absolute; height:90%; width:40px; left:5%; top:5%; } .colourBox { position:relative; margin-top:7%; width:40px; height:40px; border: 2px solid white; } .colourBox:hover { border: 4px solid yellow; } #ringDisplay { max-width: 500px; position:absolute; left:-10%; right:0; top:5%; bottom:0; margin:auto; } #bashDisplay { max-width: 500px; position:absolute; left:-10%; right:0; top:5%; bottom:0; margin:auto; } #squareBlackBash {background-color: black;} #squareBlueBash {background-color: blue;} #squareRedBash {background-color: red;} #squareGoldBash {background-color: gold;} #squareGreenBash {background-color: green;} #squareSilverBash {background-color: silver;} #squareBlackRing {background-color: black;} #squareBlueRing {background-color: blue;} #squareRedRing {background-color: red;} #squareGoldRing {background-color: gold;} #squareGreenRing {background-color: green;} #squareSilverRing {background-color: silver;} Thanks in advance for any assistance. It's working, so I guess its ok to do the dummy tween initially, but I was just wondering if there was a better way to do it. Also, any other hints/tips/tricks/recommendations are greatly appreciated! Cheers! ~Ronen

Is there any way for all the timeline/tweens to reset back to starting position all at once and pause them there and wait until triggered to play/resume again except the currently triggered timeline? for example, I have 2 slides which identifies element if it was currently on the viewport and then fires the tween sequence inside a timelineMax. (don't mind the viewport identification as it was already done) I tried TweenMax.killAll(false, true, false); but what it did was, it pauses all the delayed and remaining tweens which leaves the current state of element. What I want is since these elements are came from autoAlpha:0, it will be set back to their starting timeline sequence and wait until being triggered again. That means when another timeline is triggered, it will abort all remaining tweens of the previous timeline and vise versa for both slides. The killAll scenario is, I can see the elements that are stopped and I don't want that. I want them to have all fresh entry everytime the sequence is triggered. I am sorry for this issue has been solved years ago. Sorry for opening same thread.

It appears that once you change CSS properties that effect page layout, the effected elements can no longer be animated using GSAP. I have an example here that is a simplified version of my project. Click on any of the colored rectangles to see what I'm describing. The first time you click, it transforms and scrolls to simulate zooming in on a rect. But since doing so also changes layout CSS properties - it breaks as soon as you start animating again in a peculiar way. You won't be able to tell from the example why it is necessary to change layout properties, but it is something I need to do in my actual project. You can see the behavior I expected would happen by commenting out the lines of code that effect layout. Or view the fork that does so here. Is this a known issue? Am I the only one who needs to manipulate layout effecting properties between animations?

I have an animation with 10 chapter with label each one, when finish all the animation y have button to jump in each chapter with "seek()", for example i jump from chapter 1 to 5 with seek('chapter_5'), but when i do it, the animation jump to chapter 5 but show also the chapter 1, chapter 2 3 and 4, So, how can i jump?? to chapter 5 and show only the chapter 5 ? var tl_EscenasControl = new TimelineMax({}); tl_EscenasControl.add('escena_1',0) tl_EscenasControl.add(control_escena1(),'escena_1') tl_EscenasControl.add('escena_2','+='+delayEntreEscenas) tl_EscenasControl.add(control_escena2(),'escena_2') tl_EscenasControl.add('escena_3','+='+delayEntreEscenas) tl_EscenasControl.add(control_escena3(),'escena_3') tl_EscenasControl.add('escena_4','+='+delayEntreEscenas) tl_EscenasControl.add(control_escena4(),'escena_4') i have button to jump in each chapter buton4.click... tl_EscenasControl.seek('escena_4') it jump to chapter 4 but also show the chapter 2 and 3 how can just jump to 4 ?? and dont show the 2 and 3

Hello All, I am doing animation like this http://jsfiddle.net/g2kxL/. in phonegap 3.0 android. When my animation run for first time, animation is not smoother. and the quality of animation is almost 50% then 2nd time. After complete first loop completes it continuesly works fine. Any help would greatly appreciated.

I'm moving this into a new topic from a reply in another topic. I've created a codepen: http://cdpn.io/tlmGg The issue is that (starting from fresh page), clicking "+" to play the timeline one or more times and then clicking "-" to reverse it doesn't reverse the timeline immediately. The onReverseComplete is called right away without anything being done. You have to press "-" again causes it to do the desired thing. After doing that a few times (or once), clicking the opposite direction ("+") again triggers the onComplete without actually playing. Any ideas as to why it remains paused when "changing play directions" (i.e. from "play" to "reverse" or vice versa)? Does it immediately fire the onComplete/onReverseComplete when you change directions? If so, is this intentional behaviour?

Hi, I am trying to animate div with timeline max. I am following this procedure : - loop for total div elements with jquery's each - create tween for each div element with tweenmax - on complete of tweenmax reverse it - push tweenmax to tweens_array - add tweens_array to timeline max - on complete of timelinemax reverse it Problem : div is not tweening reverse it will come directly to origional position. here is this source code for refrence : CSS : div,body{ margin: 0; padding: 0; } .container{ position: absolute; height: 100px; width: 100%; top: 150px; } .column{ float: left; background-color: #00ffcc; height: 100%; width: 30px; margin-left:10px; border-radius: 5px; text-align: center; } HTML : <div class="container"> <div class="column column1">1</div> <div class="column column2">2</div> <div class="column column3">3</div> <div class="column column4">4</div> <div class="column column5">5</div> <div class="column column6">6</div> <div class="column column7">7</div> <div class="column column8">8</div> <div class="column column9">9</div> <div class="column column10">10</div> <div class="column column11">11</div> <div class="column column12">12</div> <div class="column column13">13</div> <div class="column column14">14</div> <div class="column column15">15</div> <div class="column column16">16</div> <div class="column column17">17</div> <div class="column column18">18</div> <div class="column column19">19</div> <div class="column column20">20</div> <div class="column column21">21</div> </div> JS : var tl = new TimelineMax(); var delayTween = 0.1; var tweenArr = []; $(".column").each(function () { tweenArr.push( TweenMax.to( this, 1, { y:-60, ease:"linear", onComplete:function () { this.reverse(); } } ) ); }); tl.add( tweenArr, '+=0', "sequance", delayTween ); tl.vars = { onComplete:function () { tl.reverse(); } } Any help would be greatly appreciated, Thanks in advance.

Hello i have a question, is possible add new tweens to a TimelineMax and reorder another on the fly (dynamically). Example: timeLine = new TimelineMax(); timeLine.add( TweenMax.to(".box1", 1, {left:100}) ).addLabel("box1"); timeLine.add( TweenMax.to(".box2", 1, {left:100}) ).addLabel("box2"); After in need add a new TweenMax after box1 but i need that box2 run after the box3 tween = TweenMax.to(".box3", 1, {left:100}); timeLine.add(tween, "box1"); timeLine.play(); RESULT: Currently the box2 and the box3 run at the same time. Another test, was get 'box2' tween and use UpdateTo() to add delay:1 but UpdateTo dont work with delays. Some idea?

I am having some basic trouble getting a div within a div to alpha tween on and off. Basically I'm trying to randomly change the text inside the div (it will be using a pictorial font so the image will change). The text changes, thus the timelineMax is working, but there is no tweening on and off -- no alpha tweening. I'll include the relevant js and css below -- if the full zip is needed, can do, but I'm sure it's something really simple I'm missing. I also noticed that storing the div in a 'global' variable -- grabbing it at the start with jquery -- wasn't working for whatever reason, and that's why I'm grabbing it each function. Thanks for pointing the errors of my ways. JS startRotateDiv(); function startRotateDiv() { var rotateDiv = $('#home_div div.content_image'); var tl = new TimelineMax({repeat:-1}); tl.add(setText); tl.to(rotateDiv,.5,{autoAlpha:1}); tl.to(rotateDiv,.5,{autoAlpha:0},"+=2"); tl.play(); } function makeid(len) { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < len; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } function setText() { var rotateDiv = $('#home_div div.content_image'); var txt = makeid(1); rotateDiv.html('<div class="notice">'+ txt + '</div>'); } CSS .notice { font-size: 80px; font-family: 'noticenotice2'; color: red; background: url('http://media.npr.org/assets/news/2010/04/11/panda-f8a7c9331bbac776e52b26feeccc53de959f46d1-s6-c30.jpg'); }

I'd like to pause my timeline at a particular point. How do I do this? This is the code I have so far. http://hastebin.com/soqelufado.pl The code repeats, but I'd like to pause it before it repeats. I figure that I should do this my providing a parameter to the final tween, which currently looks like this: . to( $(els).eq(2), 2, { left: 0, delay : 3 } ) So, how do I make this tween pause after it runs? Also, if I'm right, and there is documentation for this. where is it? Thanks.

I've been struggling with my first challenge: making a seamlessly cycling slideshow with timelinemax. So far, no matter what I do, after the animation cycles for the first time, I get an empty pane until the first animation in the chain completes. I've tried a number of ways to prevent this, but to no avail. This is what I have so far: My viewpane is 960px wide. It is initially occupied by the first slide, while the other slides are outside the right edge of the pane. All slides have a starting z-index of 100. var tl = new TimelineMax({repeat : -1}) ; tl.to( slides[1] , 2, { left : 0, // after first animation, secretly move // first slide into new starting position // and make sure it slides over the previous slide onComplete : function (){ target = slides.eq(0) ; target.css("left", "960px") ; target.css("z-index", "2000") ; } } ) .to( slides[2] , 2, { left : 0 } ) .to( slides[0], 2, { left : 0, onComplete : function() { console.debug( "completed last anim" ); // give the first slide it's oringal z-index, slides.eq(0).css("z-index", "100") ; } } ) ;

I'm in the process of creating a functions to create a slideshow. my variable 'slides' is a jquery object, containing dom elements that will be my slides. I pass 'slides[1] to my timeline function. I'd like to use the onComplete callback to increment the value of currentSlide, and then repeat the animation. However, I discovered that I couldnt' access the variable currentSlide from the callback. Doing a little poking around, I found that I couldn't access any objects from the callback. Is this expected behaviour? Or am I doing something wrong? My code: var slides = window.myApp.slides ; // returns a jQurey object currentSlide = window.myApp.slides[1] ; var tl = new TimelineMax() ; tl.to( currentSlide, 2, { left : 0, onComplete : completeHandler } ) ; } // this function does work. An animation occours function completeHandler (){ console.debug( "next slide: " . slides[2] ); // returns undefined. }

I've been playing time with tweenmax. I pretty soon realized that I couldn't get the effect that I wanted without using timelinemax. I'm loading tweenmax into my browser. But I cant do anything with it. when I start do anything with tl.to(...) chrome's console give me the error "uncaught exception: cannot call method 'to' of undefined. Console references me to the line where I use 'tl,to(). The sample code I'm working with can be seen at hastebin.com/midacafegu.vbs

Hello All, I am using a repeater to display items from a database. What I would like to do is: 1.slide in first item 2.add transformation for second item 3. add a different transformation to the third item After three items have been displayed I want to fade out first three and display next three items. and I want to repeat this process in a loop.. Here is my code: I am stuck in between. I am very new to the web development and GreenSock. Any help will be greatly appreciated! CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax(); $('.tick').each(function (index, item) { //console.log(index, item); if (index == 0) { t1.to(item, .5, { x: 100, ease: Elastic.easeOut }, "+=0.5"); } else if(index == 1){ t1.to(item, 2, { throwProps: { x: 200 } }); } else { t1.from(item, 0.8, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }) } }); t1.play(); Thanks & Regards, Bunnie

Hello, Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property. start(); function start(){ TweenMax.to($(img), 4, { css:{ scale:'+=0.5' }, ease: Power0.easeInOut, onComplete: function(){ start(); } }); } I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scale an image? Either using (transform) scale or width and height (css or dom). Basically I want to keep animating the value up, infinitely. By incrementing up, infinitely. Any help will be highly appreciated! Thank You!

This code works fine on the first loop, and not on the second: var tl = new TimelineMax({repeat:-1}) tl.fromTo(tx4,1,{skewX:-40, x:b.width},{skewX:0, x:0, ease:Linear.easeNone},'-=0.5') .to(tx4,0.5,{transformOrigin:'center bottom', skewX:70, scaleY:1.5, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:-45, scaleY:1.25, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:0, scaleY:1, ease:Back.easeOut},'-=0.1') How can I fix this? <rant> No matter how many times I run into this problem, it never seems to sink in. Looping timelines are so unintuitive in gsap that I could pull my hair out. It's soooo easy to do whatever you want with a timeline, but the moment you try to repeat it, it becomes soooo frustrating. It shouldn't even be called "repeat", because that would lead you to believe it's going to do the same thing it did the first loop. And I already know I'm going to get several responses explaining why this is so great and expected, smh</rant>