electricalessence
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by electricalessence
-
-
I'm sorry for taking so long to post a reply, and thank you so much for your answers.
Thanks for the welcome, Jonathan. As you asked, I made the codepen here
See the Pen ZpYYEX by electricalessence (@electricalessence) on CodePen
Dipscom: I've added your code on the codepen
See the Pen ZpYYEX by electricalessence (@electricalessence) on CodePen
but it still doesn't loop, I will be checking the documentation for tweenmax or timelineLite to see what can be done with the loop. -
<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
Banners ad tweenlite (or tweenmax) loop without click
in Banner Animation
Posted
Guys, I can't thank you enough for helping me solve this.
I like WarenGozaga's solution because it's the simplest one, however joe_midi's edit does work too as that's the one I finally used for the animation . I have been doing banners for a long time with Tweenlite because of the filesize, but it seems there are so many features worth checking out in all of the plugins' version. Thanks again!