Search the Community
Showing results for tags 'timelinemax'.
-
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
-
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?
-
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.
- 5 replies
-
- 1
-
-
- tweenmax
- timelinemax
- (and 1 more)
-
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?- 2 replies
-
- 1
-
-
- timelinemax
- timelinelite
- (and 5 more)
-
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, 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!
-
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
-
Hi, is there a way to change the easing method of a tween in a timeline when reversing the timeline? My example.: var tlDrops = new TimelineMax({paused:true, delay:2, reversed:true}); tlDrops.from("#geschenkedrops", 0.2, {bottom:0, right:15, ease:Back.easeOut}, "starting") .to("#geschenk", 0.5, {autoAlpha:0}, "-0.1") .to("#merci-button", 0.5, {autoAlpha:1}, "-0.1") .from("#hauptgeschenk", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:180, ease:Elastic.easeOut}, "geschenke") .from("#geschenk2", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:160, ease:Elastic.easeOut}, "geschenke") .from("#geschenk3", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:140, ease:Elastic.easeOut}, "geschenke") .from("#close-button", 0.2, {bottom:25, right:25, ease:Sine.easeOut}) .to("#geschenkedrops", 0, {autoAlpha:1}, "closing"); Now I would like to change all Elastic.easeOut easing methods into a different method (e.g. sine.easeIn) on timeline reverse. Is that possible, or do I need to create an extra timeline for the reverse function? Thanks so much, Rob
-
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>
-
I have two timelines.. tl1, tl2 for demonstration purposes. tl1 starts when the dom is ready. tl2 starts via button click. There is another button that reverses everything to where tl1 starts. The problem I have is that if the button that starts tl2 is clicked before tl1 is finished, then someone clicks the button that reverses the timelines to the start of tl1, then tl1 is reversed to the point where the interruption happened. How can I tell the button that reverses everything back to tl1 to go all the way back to zero?
-
First, I want to be clear that I know that GS is highly optimized, and that in no way do I mean to imply there's any problem with the GS speed. I've never had one. I've been working on a large sectional project for 3 months where games are being run along with videos inside an external player. One of those games -- using rudimentary Flash 3D, etc and using a touchscreen for touch detection -- runs slower than the client wants. The issue is, of course, with the videos and the external player, and with the multitude of external videos being played. That having been said, is there anything I can do to turbo-charge GS — the game relies on many TweenMax's, TimelineMax's, etc -- to get some small performance boost? I was thinking of something along the lines of fine-tuning onUpdates, or something, perhaps make them check less often — grasping at straws here. We believe the fault is in the videos/player, again, but I thought I'd investigate all angles…
-
I have timelines in my site which have animations added to them in sequence. The first time i play a particular timeline it plays fine, any time after that it skips whatever is in the first .add() or it just skips the first label .. I am not even sure how to describe this. One example is that I have an abstract that defines a sitesection (SectionViewBase). on the transitionin function it creates a timeline ads the global transition for each section and then there is a transitionInComplete function that is overwrote by the childclass that subclasses SectionViewBase. the override will return a new timline or tweenlite instance that is the transitionin of the specific section content. ANyways, the first time I do this its fine, however the second time it skips that initial .add() call and just plays whatever it gets from transitionInComplete(). Each time this tranistionIn function runs, however, it recreates the timeline. Any suggestions? Thanks.
-
Hello, I'm using the TimelineMax ans it works great. But I have a problem with something. I want to use a delayedCall function. In this function, I have other tweenMax. Something like this : var tl:TimelineMax = new TimelineMax(); tl.insert(TweenMax.to(camion, 8,{x:700, ease:Linear.easeNone})); tl.insert(TweenMax.to(nuage, 20,{x:"-100", ease:Linear.easeNone})); tl.insert(TweenMax.delayedCall(3,enleverTexte)); // function enleverTexte() { TweenMax.to(txt1, 0.7,{y:"-40", alpha:0, ease:Quint.easeIn}); TweenMax.to(txt2, 0.7,{y:"-40", alpha:0, ease:Quint.easeIn, delay:0.2}); } Now, I want to start my animation with a gap starting. Like this : tl.currentTime = 5; Normaly, I should not see the movieClip txt1 ans txt2 when my animation start (because I launch the animation at 5 seconds, and inside my timeline I hide the mc txt1 and txt2 at 3 seconds). But it doesn't works... When the animation start, even if I start at 15 seconds, I see the mc txt1 and txt2 and the function enleverTexte() is executed... How can I do this kind of manipulation ? Thank you.
-
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
-
I've solved this, but I have no idea how, and I'm trying to understand what happened. I have TImelineMax's set up in a class. One of them is this, super-simple -- I use it to have a person 'escaping' or not escaping -- if they are escaping, they move off screen, if you click, the timeline is reversed and they come back. Instantiations of this class are being moved in z-space forwards, in a timelinemax which contains repeat = -1 tweenmaxes (as per Carl's great help) -- when the person disappears off screen in the distance I reset this timeline to get them not escaping anymore. I was using gotoAndStop(0) but now am using seek(0), pause() -- the reset can happen while the timeline is moving forwards, or reverse. _escapeString = Math.random() > .5 ? "+=" + ESCAPE_DISTANCE : "-=" + ESCAPE_DISTANCE; _escapeTimeline = new TimelineMax({paused:true,onStart:tlStart,onComplete:tlComplete,onReverseComplete:tlReverseComplete,ease:Linear.easeNone}); _escapeTimeline.add(new TweenMax(this,ESCAPE_TIME,{x:_escapeString,ease:Linear.easeNone})); As I said, I solved it, somehow -- but as I don't like unknown unknowns, my question is: apart from kills(), is there anything else that would make the duration() of a timeline == 0, and the progress() == NaN ? That's what was happening. But the timeline itself existed, i.e. != null.
-
I have a function set up to play a loaded MP3 by name string: protected function playSoundByName($name:String):void { // trace("play sound by name ", $name, LoaderMax); _currentSound = LoaderMax.getContent($name); // trace("current sound is ",_currentSound); if (_currentSoundChannel) _currentSoundChannel.stop(); // trace("the sound is ", _currentSound,_currentSound.length,_currentSound.url); _currentSoundChannel = _currentSound.play(0); _currentSound.addEventListener(Event.SOUND_COMPLETE,soundComplete,false,0,true); } Which works fine when I call it directly, but not when I call it from a callback in a TimelineMax (see below -- the first call works fine, the one from inside the TLM does not). I'm sure I'm missing the obvious, but it's a big problem…Thanks… var introSoundsTL:TimelineMax = new TimelineMax({ease:Linear.easeNone}); playSoundByName("jsTexasSurf"); // works! introSoundsTL.addCallback(playSoundByName,0,["jsTexasSurf"]); // the sound from LoaderMax.getContent() in called function is null! (The loaded xml is in this form: <?xml version="1.0"?> <content> <timelimit limit="45" /> <MP3Loader url="music/jetski/321go.mp3" name="js321Go" autoPlay="false" load="true" /> <MP3Loader url="music/jetski/pg3-300beachs.mp3" name="js300beaches" autoPlay="false" load="true" /> <MP3Loader url="music/jetski/pg5-texassurf.mp3" name="jsTexasSurf" autoPlay="false" load="true" /> </content> )
-
I have a situation where I want to have a number of objects tweening from different starting points towards a common goal. They are moving in the same direction, and should move at the same pace. I also want to get rid of the object when it reaches its goal, and add a new one (or the same one) at the back of the queue. Picture a line of people moving forward in a queue: they shuffle forward slowly, all at the same speed. We start the queue with a line already formed, that is, we 'open the scene' with the line in place. Is there a way to do this with TimelineMax? I had thought of something like this _mainTimeline.to(_people,TIME,{z:"+=1000"},"+=1"); But they won't all end up at the same end point. If I substitute a fixed end point (i.e. z:1000) then they won't move at the same pace, since they distance they must cover is different. I also need to figure out a way to keep adding and removing from the queue. I suppose the answer might be to maintain an array of TweenMax's, or simply to do old-school ENTER_FRAME +='s, but I very much like the robustness of TimelineMax
