Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Joao Doria

keyframe insertion / seamless animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

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?

 

<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

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.

×