Jump to content

Joao Doria

keyframe insertion / seamless animation

Moderator Tag

Recommended Posts



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?





Link to comment
Share on other sites

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.



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

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

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?


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



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() {

		pauseBtn.onclick = function() {

		resumeBtn.onclick = function() {

		slowerBtn.onclick = function() {

		moveBtn.onclick = function() {

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.