Jump to content
Search Community

Joao Doria

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Everything posted by Joao Doria

  1. Joao Doria
    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>
  2. Joao Doria
    Thanks Carl! I will try this, it's looking very clear. Thank you for the quick response as well.
  3. Joao Doria
    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
×
×
  • Create New...