<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script>
function anima(){
TweenLite.from(".bg1", 0.8, {opacity:0, delay:0.5});
TweenLite.from(".bg2", 0.5, {opacity:0, delay:2.5});
TweenLite.from(".productos", 0.5, {opacity:0, scaleX:1.3, scaleY:1.3, delay:2.9, ease: Back.easeOut.config(3)});
TweenLite.from(".text1", 1, {opacity:0,y:-15,delay:3.4});
TweenLite.to(".text1", 0.8, {opacity:0,delay:6});
TweenLite.from(".logo", 0.5, {opacity:0, rotationY:90, delay:7});
TweenLite.from(".logo2", 0.8, {opacity:0, delay:7.5});
TweenLite.from(".btn", 0.4, {opacity:0, scaleX:1.2, scaleY:1.2, delay:8, ease: Back.easeOut.config(3)});
}
</script>
<style>
html, body{
margin:0;
padding:0;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bg1{
z-index:1;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:url(bg1.jpg) transparent no-repeat 0 0;
background-size: 100% auto;
}
.bg2{
z-index:2;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:url(bg2.jpg) transparent no-repeat 0 0;
background-size: 100% auto;
}
.productos{
position:absolute;
z-index:3;
top: 5.71%;
left: 2.67%;
width: 90.17%;
height: 67.14%;
background:url(productos.png) transparent no-repeat 0 0;
background-size: 100% auto;
}
.text1{
position:absolute;
z-index:4;
top: 75.71%;
left: 10.71%;
width: 77.38%;
height: 18.21%;
background:url(text1.png) transparent no-repeat 0 0;
background-size: 100% auto;
}
.logo{
position:absolute;
z-index:5;
top: 71.07%;
left: 68.15%;
width: 22.91%;
height: 14.28%;
background:url(logo.png) transparent no-repeat 0 0;
background-size: 100% auto;
}
.logo2{
position:absolute;
z-index:6;
top: 86.42%;
left: 68.15%;
width: 22.91%;
height: 7.85%;
background:url(logo2.png) transparent no-repeat 0 0;
background-size: 100% auto;
}
.btn{
position:absolute;
z-index:7;
top: 78.92%;
left: 6.54%;
width: 52.67%;
height: 11.78%;
background:url(btn.png) transparent no-repeat 0 0;
background-size: 100% auto;
}
img {
border: 0;
}
#Stage{
width:300px;
height:250px;
position:relative;
overflow:hidden;
cursor:pointer;
}
</style>
</head>
<body onLoad="anima();" style="margin: 0; overflow: hidden">
<div id="Stage" style="width:300px; height:250px;">
<div class="btn"></div>
<div class="logo2"></div>
<div class="logo"></div>
<div class="text1"></div>
<div class="productos"></div>
<div class="bg2"></div>
<div class="bg1"></div>
</div>
</body>
</html>
Hello, I'm a banners ad producer and I use Tweenlite for animating. I want the animation to loop and I can't see to find an answer anywhere. I tried everything including the onComplete function but it only loops the tween I'm using it on.
I use an unique HTML file where I do the animations setting the images as a background and position the elements in CSS.
This is what I have so far
How can I loop this? HELP!
Thanks in advance
