Jump to content
GreenSock

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

Loop controlling question

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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/

 

 

.

Link to comment
Share on other sites

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
  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

  • 4 months later...

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

Link to comment
Share on other sites

 

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")

  • Like 2
Link to comment
Share on other sites

Thanks Ohem... works great!

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.
×