Neverending tween

[Fusion2222 1 Likes (Newbie)]

Hi everyone,

 

I have following code:

TweenMax.to(obj,5,{x:"+=150px",repeat:-1});

Since the x property is relative, i would expect tween to move object further and further. Instead, after tween is completed, object starts at x:0. Any ideas how to create such neverending tween?

[PointC 8,599 Likes (Superhero)]

Hi Fusion2222  ,

 

That tween will just keep repeating from the beginning. Please give this a try:

function forever() {
TweenMax.to(obj,5,{x:"+=150", onComplete:forever})
}
forever();

[Fusion2222 1 Likes (Newbie)]

How simple! I almost feel incompetent to not finding out myself! Thanks PointC.

[Tahir Ahmed 93 Likes (Contributor)]

While @PointC's solution is spot on, clean and does the job well, I however, out of curiosity, looked up the documentation and found out that there could be another way of going about it, which is the by the use of `.invalidate()` method.

 

(This is one of the things I like the most about this suite of tools that there are multiple ways to solve any given problem).

 

As the documentation itself aptly puts:

 

 

.invalidate( ) : *

[override] Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.

 

So, as an alternate approach, take a look at this simple jsFiddle, JavaScipt of which is as belows:

var myDIV = document.querySelector('div');
var width = 100;
var tween = TweenMax.fromTo(myDIV, 0.8, {
  position: 'absolute',
  top: '50%',
  left: 0,
  yPercent: -width * 0.5,
  xPercent: -width,
  width: width,
  height: width,
  backgroundColor: '#cc0'
}, {
  x: '+=150',
  onUpdate: onTweenUpdate,
  onComplete: onTweenComplete,
  callbackScope: this,
  ease: Power0.easeNone
});

function onTweenUpdate() {
  var currentX = myDIV._gsTransform.x;
  if (currentX >= window.innerWidth + width) {
    TweenMax.set(myDIV, { x: 0 });
    tween.invalidate().restart();
  }
}

function onTweenComplete() {
  var currentX = myDIV._gsTransform.x;
  if (currentX >= window.innerWidth + width) {
    TweenMax.set(myDIV, { x: 0 });
  }
  tween.invalidate().restart();
}

 

I am happy to have learned something new myself thanks to the problem you presented

 

Happy Tweening!

[PointC 8,599 Likes (Superhero)]

Very nice Tahir.

 

I couldn't agree more on the various ways to solve a problem - GSAP is so flexible. As I was discussing with Blake last week - the members of this forum also use those tools in a variety of ways and it's so fun and educational to see how different people approach a problem.

 

It's funny that you used invalidate() as I was just doing some reading on that yesterday because I've never used it before.

 

 

[Diaco 1,948 Likes (Superhero)]

yeah , there isn't any difference in result , but personally i prefer to use first way from performance wise  , .invalidate() use some calculations , and in this case isn't really necessary .