Loop controlling question

[adrimage 1 Likes (Newbie)]

Hello guys, i am new here and learning and enjoying greensock more everyday

 

I have to ask a simple question regarding the looping status for AdExchanges. I know that many publishers will limit the animation time to 15 seconds.

 

So if i have a loopable animation i should control the loop state and when it gets to 15s just stay static.

 

My question is if i have just a sequential animation that ends before 15 seconds and then stays static, do i have to implement a loop control too?

 

In the case to control the loop, how could it be done with greensock?

 

Thanks guys.

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

If you want an animation to loop a set number of times, the best approach is to use a repeating TimelineMax like so:

 

var tl = new TimelineMax({repeat:3, repeatDelay:1})


tl.to(".green", 0.5, {y:300})
  .to(".blue", 0.5, {y:300})
  .to("div", 0.5, {opacity:0});

demo: http://codepen.io/GreenSock/pen/RrKmQp?editors=001

 

To learn more about the timeline tools check out:

http://greensock.com/timelinelite

http://greensock.com/timelinemax

http://greensock.com/position-parameter

 

I'm not sure I follow exactly what you are asking about AdExchanges, but my guess is that if you animation is less than 15 seconds then you shouldn't have anything to worry about.

[somnamblst 183 Likes (Specialist)]

The reason for the looping animation rule is that looping animation is annoying, so the ad industry responded with the 3X or 15 seconds rule.

 

I know of no one who has gotten dinged, people either follow the rule or don't, I don't think there was a way that did not involve a human with a stopwatch to enforce it. 

 

The unfortunate byproduct of that rule was some mass production banner shops did everything as a 3X animation, when national ads created by agencies were once and done.

 

I personally do, once and done, and try to make my duration appropriate to the messaging.

 

Since we are talking about HTML5 banners there is an AdHelper specific class for Flash CC Canvas export banners, created by the createjs team.

 

http://createjs.com/html5ads/

 

http://github.com/createjs/sandbox/

 

 

.

[joe_midi 238 Likes (Specialist)]

You could write a function that divides 15 seconds by the total duration of a timeline, and check that every time the timeline completes.

var tl;
var timeLimit = 15; //in seconds
var loops = 0;

function loop() {
  if (loops <= timeLimit / tl.totalDuration()) {
    tl.seek(0);
    ++loops;
  }
}

tl = new TimelineMax({onComplete: loop})

tl.to('.green', 0.5, {y:300})
  .to('.blue', 0.5, {y:300})
  .to('div', 0.5, {opacity:0});

But this is a bit pointless as its easy enough just to find out what the total duration of your timeline is and then divide the 15s by that, then write it as Carl has it.

var tl = new TimelineMax({repeat:6, repeatDelay:1}); //15s / (1.5 + 1) = 6 repeats

tl.to(".green", 0.5, {y:300})
  .to(".blue", 0.5, {y:300})
  .to("div", 0.5, {opacity:0});

console.log(tl.totalDuration());
// 1.5

[dev-kp 12 Likes (Newbie)]

You can try something like this:

 

See the Pen adWdKG?editors=101 by Dev-KP (@Dev-KP) on CodePen

 

Basically before each repeat there is a check to see if the total time will be more then 15 sec. 

tl.totalTime()+tl.totalTime() >= maxTime ? tl.pause() : tl.repeat(); 

If it is then the animation will stop and if not then another repeat will occur.

This will only work with timeline.

var maxTime = 15;
var loops = 3;

var tl = new TimelineMax({repeat:loops, repeatDelay:1, onRepeat:function(){
  // Check if another loop of the animation will make the total time of the animation longer then 15 sec
  // More or equal to 15 sec the animation will stop
  // If its less it will repat
  tl.totalTime()+tl.totalTime() >= maxTime ? tl.pause() : tl.repeat();
}, onUpdate:function(){
  //outputs the time into the text box
  document.getElementById('time').value = tl.totalTime();
}})


tl.to("#div1", 4, {x:300})
  .to("#div2", 4, {x:200})
  .to("#div3", 4, {x:100});

Hopefully that helps.

[SonnyT 1 Likes (Newbie)]

Hi Friends.

Thanks for sharing all your answers. I too wanted to know about loop controlling, I am sure it will help many people here.

[Buster 0 Likes (Newbie)]

Hi,

I have a simple banner animation that I want to loop twice. The loop function will work the problem is I have a button on a different timeline that works independently. So when the banner restarts the button is still there and doesn't reset itself. I played around with some reset functions but in all honesty I have no idea what I am doing. I have pasted the code below with the current 2x loop. Can anyone explain how I can reset the button to start with the begging of the animation on the second rotation? Many thanks.

(function(){
	var tl1 = new TimelineMax({repeat:2, repeatDelay:2});
	
	tl1
	.to('#myAd',.4, {opacity:1})
        .from('#anObjectMoving',1, {scale:1.2, ease: Power2.easeOut},'-=0.5')
	
		
//here is the rollover animation
var btnAnim = new TimelineMax({ paused: true })
  .to("#myAd_button", .4, { scale:1.1, ease: Back.easeOut }, 0);

//button fades in here
TweenLite.from("#myAd_button", .7, {
  autoAlpha: 0,
  scale:0,
  delay: 4,
  ease: Power3.easeOut,
  onComplete: function() {        
    //this plays the rollover animation on hover
    document.getElementById("myAd").onmouseenter = function() {
      btnAnim.play();
    };
    
    document.getElementById("myAd").onmouseleave = function() {
      btnAnim.reverse();
    };
  }
});

[ohem 324 Likes (Leader)]

 

Hi,

I have a simple banner animation that I want to loop twice. The loop function will work the problem is I have a button on a different timeline that works independently. So when the banner restarts the button is still there and doesn't reset itself. I played around with some reset functions but in all honesty I have no idea what I am doing. I have pasted the code below with the current 2x loop. Can anyone explain how I can reset the button to start with the begging of the animation on the second rotation? Many thanks.

(function(){
	var tl1 = new TimelineMax({repeat:2, repeatDelay:2});
	
	tl1
	.to('#myAd',.4, {opacity:1})
        .from('#anObjectMoving',1, {scale:1.2, ease: Power2.easeOut},'-=0.5')
	
		
//here is the rollover animation
var btnAnim = new TimelineMax({ paused: true })
  .to("#myAd_button", .4, { scale:1.1, ease: Back.easeOut }, 0);

//button fades in here
TweenLite.from("#myAd_button", .7, {
  autoAlpha: 0,
  scale:0,
  delay: 4,
  ease: Power3.easeOut,
  onComplete: function() {        
    //this plays the rollover animation on hover
    document.getElementById("myAd").onmouseenter = function() {
      btnAnim.play();
    };
    
    document.getElementById("myAd").onmouseleave = function() {
      btnAnim.reverse();
    };
  }
});

Just put the button on your main timeline; it doesn't need to be independent.

var tl1 = new TimelineMax({repeat:2, repeatDelay:2});

tl1
.to("#myAd",.4, {opacity:1})
.from("#anObjectMoving",1, {scale:1.2, ease: Power2.easeOut},"-=0.5")
.from("#myAd_button", .7, {autoAlpha:0, scale:0, ease: Power3.easeOut, onComplete: function() {   
//allows button rollover animation after the button has fully appeared
document.getElementById("myAd").onmouseenter = function() {
	btnAnim.play();
};

document.getElementById("myAd").onmouseleave = function() {
	btnAnim.reverse();
};
}}, "+=3.5")

[Buster 0 Likes (Newbie)]

Thanks Ohem... works great!