Can't get updateTo to work properly

[awikio]

Hi guys,

 

First of all, thank you GreenSock team for creating this amazing product. It has made me excited about web development again! And I'm now on the quest to create my first game using GreenSock.

 

First post here, although I've been reading quite a lot on the forums for the last couple of days - thanks all for the help I've found in the different threads!

 

Now to my problem...

 

I've got the an object that I want to tween from left to right, right to left infinitely. I got that working.

 

My problem is that my object is set to -150px to the left of the screen via CSS. I then tween the x value to go all the way to the right, then a repeat set to -1 and yoyo set to true. So it's going back and forth as I want.

 

BUT...

 

After the first tween, when it's all the way to the right, I need to update the from-X tween value to 150 so my element doesn't go outside the screen.

 

I just can't get that working properly, I bet I'm missing something trivial, or misunderstand how updateTo() should be used...

 

It does run the updatex() function but it breaks the yoyo effect and doesn't seem to change the X value as intended.

 

Here's the code:

 

.submarine {
  background: #707070;
  width: 150px;
  height: 50px;
  border-radius: 20px;
  position: absolute;
  bottom: 50px;
  left: 100px;
  z-index: 1;
}

 

my_submarine = $('.submarine');

submarine_tween = new TweenMax.fromTo(my_submarine, 2, {x: 0}, {onRepeat: updatex, x: window_width, repeat: -1, repeatDelay: 2, yoyo: true});


function updatex() {
  
	console.log('updating values');
  
	submarine_tween.updateTo( {x: 150}, {x: window_width}, false );
}

 

 

Thanks in advance

 

awikio

[Sahil]

I couldn't reproduce that behavior using snippets you posted. Can you post that as reduced test case demo?

 

 

[awikio]

Hi Sahil,

 

Here is a test case.. So the yoyo effect is working, but as you can see it's going outside the screen to the left despite me trying to use updateTo to change the X value so it won't.

 

See the Pen VxVNJJ by grpk92jdiu2i (@grpk92jdiu2i) on CodePen

 

[Sahil]

The updateTo method only works with generic objects and not dom objects. In docs you can also see that you can get unexpected behavior for reversing tweens.

 

https://greensock.com/docs/TweenMax/updateTo()

 

See the Pen LmXKOy?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

 

What you are trying to do can be achieved using invalidate method. In following demo, onRepeat I am updating the values in vars object and then invalidating the tween. You can repeat the same logic for resize event so you won't see any odd behavior.

 

See the Pen deQxNq?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

 

[awikio]

Thank you, Sahil!

 

That's exactly what I need. Thanks a bunch for the thorough explanation!

 

Cheers