Jump to content
Search Community

Banners ad tweenlite (or tweenmax) loop without click

electricalessence test
Moderator Tag

Go to solution Solved by joe_midi,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

<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

Link to comment
Share on other sites

Hello and Welcome to the GreenSock forum!

 

It will be really hard to know what is going on without being seeing it animate. So here is a video tut on how to create a codepen demo example:

 

 

This way we can help you better by testing your code live and in context.

 

Thanks :)

  • Like 2
Link to comment
Share on other sites

Following up on top of what Jonathan has said...

 

You are using TweenLite in your setup, there is no chaining in it, neither you have set variables to control your tweens. The simplest way for you to make your current setup work is to create a function that will animated your endframe to a neutral position clear all the inline style created by GSAP (effectively reseting your unit) then, calling your anima() function again.

 

Something in the lines of:

function resetAd() {
 TweenLite.set("#Stage div", {clearProps:"all"});
 TweenLite.to("#Stage", 0.3, {autoAlpha:1, onStart:anima})
}

function startLoop() {
 TweenLite.to("#Stage", 0.3, {autoAlpha:0, onComplete:resetAd});
}

But bear in mind that you will be better off by simply using TweenMax as it contains a lot of goodies that would make you life a lot easier. I'm assuming you have an extremely limited file weight limit but if it isn't the case, you should consider using TimelineLite for your animations.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

@electricalessence: You need to actually call Dipscom's loop function at some point. Just as you are calling anima(); within the HTML to start the banner, you need to call startLoop(); at some point to start the loop. Something like this in your current configuration.

 

See the Pen EgamyB by joemidi (@joemidi) on CodePen

 

However, if you are able to use TweenMax instead, you get the added benefit of being able to use TimelineMax, which simplifies the process a lot.

 

This would be the same animation using TimelineMax:

See the Pen wzBdzP?editors=0010 by joemidi (@joemidi) on CodePen

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

Hey buddy! You can add this single line of code!

JavaScript:

function anima(){
		var tween1 = TweenLite.from(".bg1", 0.8, {opacity:0, delay:0.5});
		var tween2 = TweenLite.from(".bg2", 0.5, {opacity:0, scaleX:1.3, scaleY:1.3, delay:2.9, ease: Back.easeOut.config(3)});
		var tween3 = TweenLite.from(".bg3", 1, {opacity:0,y:-25,delay:3.4});
		var tween4 = TweenLite.from(".blanco", 1, {opacity:0, delay:5.5});
		var tween5 = TweenLite.from(".text1", 1, {opacity:0, delay:6});
		var tween6 = TweenLite.from(".btn", 0.5, {opacity:0, scaleX:1.2, scaleY:1.2, delay:6.5, ease: Back.easeOut.config(3)});
    
    //This will reset the ad
    TweenLite.delayedCall(5, anima); //delayedCall(seconds, callback function
}

CODEPEN LINK --> 

See the Pen pEgdVG by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

 

Read the documentationhttps://www.greensock.com/asdocs/com/greensock/TweenLite.html

  • Like 3
Link to comment
Share on other sites

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!

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.
×
×
  • Create New...