Looping Animation

code21 · October 13, 2017

I am trying to loop entire animation , any thoughts or example how I can achieve it

<!doctype html>
<html>
<head>
<meta charset="utf-8">

 
<style>
div{
               position:absolute;
               left:0px;
               top:0px;
}
img{
               position:absolute;
               left:0px;
               top:0px;
}
#banner{
               width:160px;
               height:600px;
               overflow:hidden;
               background-color:#f4f4f4;
               cursor:pointer;
               visibility:hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #AAAAAA;
}
.board{
               opacity:0.5;
}
.inv{
               visibility:hidden;
}
#logo{
               position:absolute;
               left:100%;
}
</style>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var clickTag = "#";
var loadCount = 6;
var loaded = 0;
var ctaActive = false;
 
function init(){
               console.log("init()");
               TweenMax.to(banner, 0.5, {autoAlpha:1});
               var dur = 3;
               var del = 1;
              
               dur = 0.5;
               TweenMax.to(copyA, dur, {autoAlpha:1, delay:del});
               del += 0.6;
               TweenMax.to(copyB, dur, {autoAlpha:1, delay:del});
               del += 0.6;
               TweenMax.to(copyC, dur, {autoAlpha:1, delay:del});
               del += 1.0;
               dur = 0.8;
               TweenMax.to(cta, dur, {autoAlpha:1, delay:del});
               del += dur;
               dur = 1.2;
               TweenMax.to(logo, 0, {autoAlpha:1, delay:del});
               TweenMax.to(logo, dur, {left:-325, delay:del, ease:Power2.easeOut});
               setTimeout(ctaOn, del * 1000);
 
}
 
function loadCheck(id){
               loaded ++;
               console.log(loaded, loadCount, id);
               if(loaded == loadCount){
                              init();
               }
}
function ctaOn(){
               ctaActive = true;
}
function hit(){
               window.open(clickTag);
}
function over(){
               console.log("over()");
               if(ctaActive){
                              TweenMax.to(cta, 0.25, {autoAlpha:0.85});
               }
}
function out(){
               console.log("out()");
               if(ctaActive){
                              TweenMax.to(cta, 0.25, {autoAlpha:1});
               }
}
</script>
</head>
 
<body>
<div id="banner" onClick="hit()" onMouseOver="over()" onMouseLeave="out()">
 
<img id="pic" src="pic.png" onload="loadCheck('pic')">
 
<img id="copyA" class="inv" src="copyA.png" onload="loadCheck('copyA')">
 
<img id="copyB" class="inv" src="copyB.png" onload="loadCheck('copyB')">
 
<img id="copyC" class="inv" src="copyC.png" onload="loadCheck('copyC')">
 
<img id="logo" class="inv" src="logo.png" onload="loadCheck('logo')">
<img id="cta" class="inv" src="cta.png" onload="loadCheck('cta')">
<!--
<img src="board04.png" class="board">
-->
 
</div>
 
</body>
</html>

Carl · October 13, 2017

Hi and welcome to the GreenSock forums,

There is really no reason to have to update and track the durations and delays are you are doing. TimelineMax solves all the problems with that technique.

It would be really great if you would create a CodePen demo so that we could actually help you modify the code, but here is something that should roughly work. I didn't go crazy trying to match all the timing, but you can replace your TweenMax code with this:

var tl = new TimelineMax({repeat:3, repeatDelay:0.5})
      tl.to(copyA, 3, {autoAlpha:1}, "+=1")
         .to(copyB, 3, {autoAlpha:1}, "+=0.6")
         .to(copyC, 3, {autoAlpha:1}, "+=0.6")
         .to(cta, 0.8 {autoAlpha:1}, "+=1")
         .set(logo, {autoAlpha:1}, "+=1")
         .to(logo, 1, {left:-325,  ease:Power2.easeOut}, "+=1")

You are loading TweenMax which already includes TimelineMax so there is nothing to worry about regarding files size.

Definitely watch these 2 videos in our learning section:

https://greensock.com/sequence-video

https://greensock.com/position-parameter

The hour or 2 you invest in learning timelines will save you days of time in your future banner work.

code21 · October 13, 2017

Thank you this helped as well as the video , I was able to make it repeat but its flickering rather than smooth transition .

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

flysi3000 · October 13, 2017

1 hour ago, code21 said:

Thank you this helped as well as the video , I was able to make it repeat but its flickering rather than smooth transition .

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

Throw up a codepen link so we can see what you're seeing and help troubleshoot, if you're able.

davi · October 14, 2017

You'll see a flicker because it's not animating back to its initial state at zero alpha/opacity, before they fade in again on the loop. You need to add more tweens to fade each one back to zero alpha/opacity before looping.

code21 · October 14, 2017

Thanks Davi,

would it be possible for u to look at the code I have and tell me how I can change it , would be of great help if you show me how to change how to add more tween to fade each one back to zero alpha.opacity before looping

<!doctype html>
<html>
<head>
<meta charset="utf-8">

#GRY_objective, #GRY_risk, #GRY_personalized{
position: absolute;
left:300px;
}

</style>

tl.to(SpeciFi, 0.5, {autoAlpha:1, ease:Power1.easeIn});

   tl.to(GRY_objective, 1, {autoAlpha:1})
   tl.to(GRY_objective, 2,{left:0, ease:Power3.easeInOut},"GRY_objective")
tl.to(GRY_objective, 2,{left:-300, opacity:0, ease:Power3.easeInOut},"+=3.1")


   .to(GRY_risk, 2,{ autoAlpha:1, left:0, ease:Power3.easeInOut},"GRY_objective+=1.2")
.to(GRY_risk, 2,{left:-300, opacity:0, ease:Power3.easeInOut,},"-=2");

tl.to(GRY_personalized, 0, {autoAlpha:1},"-=0");
tl.to(GRY_personalized, 2, {left:0, ease:Power3.easeInOut});

tl.to(cta, 3, {autoAlpha:1});
setTimeout(ctaOn, del * 1000);
}

</div>

</body>
</html>

davi · October 14, 2017

I’m on my iPhone right now so it’s difficult to write out code or a lot of text. But looking at your code you can probably just fade out the whole banner at the end of the timeline since it fades in at the beginning. So just copy your first line for the banner, change the alpha to zero instead of one, and add a delay to the end like how you did with the other tweens.

ohem · October 14, 2017

Seems like you want this: https://greensock.com/forums/topic/17226-stop-a-timelinemax-loop-at-a-point-before-final-action/

code21 · October 19, 2017

Thanks Ohem and davi.

Davi I used the trick you mentioned and it works fine, but if I set it to repeat 3 times only then the animation will stop at the empty white screen

Ohem ,

I am using your code but haven't had luck, I might be messing how I am calling the function

heres the my code below: I have highlighted the function code that I have used , Greatly appreciate your help on this .

<!doctype html>

<html>

<head>

<style>

div{

position:absolute;

left:0px;

top:0px;

}

img{

position:absolute;

left:0px;

top:0px;

}

#banner{

width:300px;

height:250px;

overflow:hidden;

background-color:#ffffff;

cursor:pointer;

visibility:hidden;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

border: 1px solid #AAAAAA;

}

.board{

opacity:0.5;

}

.inv{

visibility:hidden;

}

#Spec{

position:absolute;

z-index: 9;

padding-top:28px;

}

#GRY_objective, #GRY_risk, #GRY_personalized{

position: absolute;

left:300px;

}

</style>

var clickTag = "#";

var loadCount = 7;

var loaded = 0;

var ctaActive = false;

function init(){

console.log("init()");

var i =0

var tl= new TimelineMax({onComplete:stayLit, repeatDelay:0.10, ease:Power3.easeInOut})

tl.to(banner, 0.5, {autoAlpha:1});

tl.to(Meet_digital, 0, {autoAlpha:1},"+=.5");

tl.to(Meet_digital, 2, { left:-300, ease:Power2.easeInOut},"+=1");

tl.to(Spec, 0, {autoAlpha:1})

.to(Spec, 2, {top:-30, ease:Power2.easeOut},"Meet_digital+=.25");

tl.to(GRY_objective, 0, {autoAlpha:1})

.to(GRY_objective, 2,{left:0, ease:Power3.easeInOut},"+=.9")

.to(GRY_objective, 2,{left:-300, ease:Power3.easeInOut,},"+=2.1")

.to(GRY_risk, 2,{autoAlpha:1, left:0, ease:Power3.easeInOut,},"GRY_objective-=6.1")

.to(GRY_risk, 2,{left:-300, ease:Power3.easeInOut,},"GRY_objective-=2");

tl.to(GRY_personalized, 0, {autoAlpha:1},"-=.5");

tl.to(GRY_personalized,2, {left:0, ease:Power3.easeInOut},"+=1.5");

tl.to(cta, 2, {autoAlpha:1, delay:1});

setTimeout(ctaOn, 1 * 1000);

tl.to(banner, 1, {autoAlpha:0},"+=1");

function stayLit() {

i++;

if(i=-1) {

TweenMax.to("#banner, 1", {autoAplha:0, onComplete: function(){tl.restart()}});

}

function loadCheck(id){

loaded ++;

console.log(loaded, loadCount, id);

if(loaded == loadCount){

init();

}

function ctaOn(){

ctaActive = true;

}

function hit(){

window.open(clickTag);

}

function over(){

console.log("over()");

if(ctaActive){

TweenMax.to(cta, 0.25, {autoAlpha:0.85});

}

function out(){

console.log("out()");

if(ctaActive){

TweenMax.to(cta, 0.25, {autoAlpha:1});

}

</script>

</head>

<body>

<!--

-->

</div>

davi · October 19, 2017

Hi Code21,
It's definitely going to be best and a lot easier for you to just spend a bit of time creating a CodePen so that we can help you with this, as other have said. Otherwise we're just looking at code without actually being able to see it. Use your own server, tinypic.com, cloudinary, or something else to host your images.

Right off the bat I can tell that things are a bit messed up. There's a couple of brackets missing in the stayLit function (for the function and if statement), the variable "i" is getting incremented, so it will never get to -1, that code will never fire, it should probably be your number of loops not -1. You have quotes around your TweenMax id and duration in the tween inside of the stayLit function. Plus, it's autoAlpha not autoAplha. You should check if 'i' (the loop count), is at a certain point, and then execute the action you want when it's done doing the amount of loops you want.

Now I haven't looked at others code above or even your code into too much depth but an easy option would be to go to a specific point in the timeline to stop at the end of the loops, (obviously fix the coding errors I mentioned above), and then just point your GSAP timeline to a specific point, like tl.progress(.95) or whatever the point should be.

Notifications

Messages

Looping Animation

Warning: Please note

Recommended Posts

code21

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

code21

Link to comment

Share on other sites

flysi3000

Link to comment

Share on other sites

davi

Link to comment

Share on other sites

code21

Link to comment

Share on other sites

davi

Link to comment

Share on other sites

ohem

Link to comment

Share on other sites

code21

Link to comment

Share on other sites

davi

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members