Jump to content
Search Community

Joao Doria

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by Joao Doria

    keyframe insertion / seamless animation

    in GSAP

    Posted

    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>

    keyframe insertion / seamless animation

    in GSAP

    Posted

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