Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Fusion2222

Neverending tween

Recommended Posts

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?

Link to comment
Share on other sites

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();

:)

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

 

:) 

  • Like 1
Link to comment
Share on other sites

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 .

  • Like 1
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.
×