How to Tween the same object more than only one time

[Andre9111]

Hi guys! I am new to Greensock and I am so amazed about the power it has. I started to learn how to use it and during one of an example project I found a problem in which I can't go on.

The problem:

I have a panoramic photo, that is bigger than the screen and I want to use TweenMax to move over it and show also the hidden part, till now is everything ok, the problems come if I want to move to the same direction more than one time. For example when I want to discover the right part of the image and I push on my arrow button to move right the first time I push it works, but the second time I push it doesn't move again. Surely is a much more simple problem than how I think but I would really want to know if is normal that doesn't work more than once.

Here there is the code of the Tweens:

$('#frecciaDx').on('click', function () {
       TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:-200}});
});
$('#frecciaSx').on('click', function () {
	TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:200}});
});
$('#frecciaSu').on('click', function () {
        TweenMax.to("#stanza", 0.8, { y: 600 });
});
$('#frecciaGiu').on('click', function () {
	TweenMax.to("#stanza", 0.8, { y: -600 });
});

Thank you really much guys!

[Jonathan]

Hello Andre9111, and Welcome to the GreenSock Forum

 

I think what is happening is that your telling GSAP to tween to that exact absolute value.. for example marginLeft: 200. The first time you click it, it will move to 200. But the second time you click it doesn't move since technically it is already at margin-left: 200px, so it doesn't move.. In order to move it every time you will have to make the value being animated a relative value and not a absolute value.

So instead of writing 200 as the value, you would write "+=200" .. this will tell GSAP to increase the movement by 200px each time it runs the tween.

 

Try this

$('#frecciaDx').on('click', function () {
       TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:"-=200"}});
});
$('#frecciaSx').on('click', function () {
	TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:"+=200"}});
});
$('#frecciaSu').on('click', function () {
        TweenMax.to("#stanza", 0.8, { y: "+=600" });
});
$('#frecciaGiu').on('click', function () {
	TweenMax.to("#stanza", 0.8, { y: "-=600" });
});

x

You can see an example of using relative tweening here using transform translate():

 

See the Pen yYbBGb by jonathan (@jonathan) on CodePen

 

And using relative tweening here using transform rotate():

 

See the Pen yYvJoW by jonathan (@jonathan) on CodePen

 

If your still having an issue please create a reduced codepen demo showing the issue so we can better help you by testing your code live. https://www.youtube.com/watch?v=g13vpXbs34I

 

 

Happy Tweening!

[Andre9111]

Thank you really really really really really much Jonathan, studying GSAP I saw this method but I really forgot it ahahahah.

Thank you really really much again, you saved me from becoming crazy!!