Share Posted April 2, 2013 Hello, I am animating three divs according to three variables I request from a server: this.onload = function(){ var tldot = new TimelineMax({delay:0, repeat:-1}); tldot.add( TweenMax.to(".bgdot", <%= 1/windSpeed1 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); var tldash = new TimelineMax({delay:0, repeat:-1}); tldash.add( TweenMax.to(".bgwave", <%= 1/windSpeed2 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); var tlwave = new TimelineMax({delay:0, repeat:-1}); tlwave.add( TweenMax.to(".bgdash", <%= 1/windSpeed3 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); }; I am trying to make periodic server requests that will alter the speed of the animation according to the new values passed by the variables. I tried to do this manually by doing using tweenmax: window.setTimeout(function() { TweenMax.to(".bgdot", <%= windSpeed1 %>, {backgroundPosition:"-100px center", ease:Linear.easeNone, repeat:-1}); }, 5000); But since this affects an ongoing animation it makes a bump. Is there any way I can alter the speed and keep the flow of the loop? If so, how do I add it to the current TimelineMax I created? Thanks, João Link to comment Share on other sites More sharing options...
Share Posted April 2, 2013 Hi and welcome to the GreenSock forums. You can't edit the duration of a tween once it has been created, but you can edit the timeScale(). timeScale(): Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc. For example, if an animation's duration is 2 but its timeScale is 0.5, it will take 4 seconds to finish. If you nest that animation in a timeline whose timeScale is 0.5 as well, it would take 8 seconds to finish. You can even tween the timeScale to gradually slow it down or speed it up. http://api.greensock.com/as/com/greensock/core/Animation.html#timeScale() The easiest thing to do would be to give all your tweens a duration of 1, and then your server can supply the appropriate timeScale values var tldotTween = TweenMax.to(".bgdot", 1, {backgroundPosition:"100px center", ease:Linear.easeNone, repeat:-1}); function on serverRequestComplete() { //assume serverResponseValue = 0.5; tldotTween.timeScale(serverResponseValue) // tween will be set immediately to half-speed //or tween the timeScale for a smooth transition TweenLite.to(tldotTween, 1, {timeScale(serverResponseValue); } I noticed you were using timelines but you really don't need to if they only contain 1 tween. Link to comment Share on other sites More sharing options...
Author Share Posted April 2, 2013 Thanks Carl! I will try this, it's looking very clear. Thank you for the quick response as well. Link to comment Share on other sites More sharing options...
Author Share Posted April 6, 2013 Hi Carl, now I have another doubt. Is it possible to change a css property while the tween is being animated? I managed to change the timescale and other controls but I might be writing something wrong when it comes to changing the css? (basically I would like this object to move when I click the button). Would that be the case for using timeline instead? <body> <div class="box"><%= jenga %></div> <div style="display:block; position:relative;"><input type="button" id="fasterBtn" value="Faster!"></div> <div style="display:block; position:relative;"><input type="button" id="pauseBtn" value="Pause dat ****!"></div> <div style="display:block; position:relative;"><input type="button" id="resumeBtn" value="Resume dat ****!"></div> <div style="display:block; position:relative;"><input type="button" id="slowerBtn" value="Slow down dat ****!"></div> <div style="display:block; position:relative;"><input type="button" id="moveBtn" value="Move dat ****!"></div> </body> <script> window.onload = function(){ var fasterBtn = document.getElementById("fasterBtn"), pauseBtn = document.getElementById("pauseBtn"), resumeBtn = document.getElementById("resumeBtn"), slowerBtn = document.getElementById("slowerBtn"), moveBtn = document.getElementById("moveBtn"), datTween = TweenMax.to(".box", 10, {width:"500px", ease:Linear.easeNone, repeat:-1}); fasterBtn.onclick = function() { datTween.timeScale(5); }; pauseBtn.onclick = function() { datTween.pause(); }; resumeBtn.onclick = function() { datTween.resume(); }; slowerBtn.onclick = function() { datTween.timeScale(1); }; moveBtn.onclick = function() { datTween.set({width:"10px"}); } }; </script> Link to comment Share on other sites More sharing options...
Share Posted April 6, 2013 it seems like TweenMax's updateTo() method is what you need: http://api.greensock.com/js/com/greensock/TweenMax.html#updateTo() Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now