Is there a way to infinitly scale an image

[Jonathan 5,176 Likes (Superhero)]

Hello,

 

Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property.

start();
function start(){
       TweenMax.to($(img),
                   4,
                   { css:{ scale:'+=0.5' },
                   ease: Power0.easeInOut,
                   onComplete: function(){
                            start(); 
                   }
         });
}

I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scale an image? Either using (transform) scale or width and height (css or dom).

 

Basically I want to keep animating the value up, infinitely. By incrementing up, infinitely.

 

Any help will be highly appreciated! Thank You!

[jamiejefferson 1,185 Likes (Superhero)]

I see nothing wrong with your recursive function approach, and it's what I would have recommended had you not already suggested it.

 

I had a play around and it seems this pattern would also work, although you can decide if it's "better".

TweenMax.to($(img), 4, {
  scale:"+=0.5",
  ease: Power0.easeInOut,
  onComplete:function(tween) {
    tween.invalidate().progress(0);
    // clear starting values, move playhead to the beginning for repeat
  },
  onCompleteParams:["{self}"]
});

[GreenSock 8,117 Likes (Superhero)]

Just be careful, Zullo - scaling an image up really big can incur substantial processing by the browser (this has nothing to do with GSAP - it's just that the browser has to calculate more and more pixels and repaint larger areas of the screen). 

[Jonathan 5,176 Likes (Superhero)]

Thanks Jack for the advice, i will only scale for a specific amount of time to keep the CPU processing low. And thanks jamiejefferson for the better solution, thanks!!!