JS to run alternate timeline?

[agenturge]

I have a banner that runs a quick GSAP driven animation as well as a JS based countdown timer.

 

//edited to include link

 

 

GSAP code

	  var tl1 = new TimelineMax ();	
	 	tl1.from("#myAdHero", 1, {ease:Sine.easeInOut, autoAlpha:0, delay: 1})
			.from("#myAdLogo", 1, {ease:Power3.easeInOut, autoAlpha:0, delay: .25})
			.from("#timer", 1, {ease:Sine.easeInOut, autoAlpha:0})
			.from("#myAdCTA", 1, {ease:Power3.easeInOut, autoAlpha:0})
			.from("#myAdBar", 1, {left: "-300", ease:Power1.easeInOut})
			.from("#myAdTxt1", .5, {ease:Power2.easeIn, autoAlpha:0})
			.to("#myAdTxt1", .5, {autoAlpha:0}, "+=3")
			.from("#myAdTxt2", .5, {ease:Power2.easeIn, autoAlpha:0})
		}())

When the countdown reaches a specified date the timer would just no longer remain visible.

 

This is the code in that makes the timer <div> disappear ( I didn't include all of the code because I didn't think it was necessary)

if (time[1] <= 0) {
      clearInterval(interval_id);
	  document.getElementById('timer').style.display = 'none';
    }

Everything works great at this point but now, what I need to do, is move my button over and revise the copy with a different message.  All of my lines of copy are in my sprite sheet.

 

So, I was wondering, if I created an alternate timeline, could I use the above if/then to run it in place of the TL1 timeline and if so, how would I go about doing it? I'm really not well versed in JS.

See the Pen XXddLq by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

It would really help if you could reduce your animation above as much as possible (one or 2 tweens) and show us how your countdown timer interacts using a CodePen demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

unfortunately, its difficult to understand how you should change / fix your banner just by looking at the code you provided and without something that we can edit its even more difficult to explain to you what needs to be done. You said you need to move your button over and revise the copy but I do not know what either of those things are. We don't need to see the real assets from your banner, just some simple colored divs or text that moves around should suffice.

 

I'm thinking the solution could be something as easy as us saying "when your timer expires, just call play() on another timeline or call a function that builds another timeline" but again its much easier to work with a demo that replicates your setup.

[agenturge]

Fair enough.

 

 

I'm still a novice, but I removed as much as i could to make it easier to go through. This is really the tail-end of the animation.

 

You'll see i have the countdown timer in a <div>. This also holds true for the button and the line of text.

 

This is strictly a banner so everything happens on page load and the way this is designed to operate is when the timer hits a specified date, then the timer would go away. The designer wants to the button to reposition and the text to read differently.  There are actually two other sizes I'd be working on with this where that gray box would resize as well (luckily it's a div).

I was thinking the easiest way would be to create alternative styles/divs and see if i could create a second timeline that would run in place of the first one when the timer hits that zero hour.

[Carl]

thanks for the demo. looks like you have the logic figured out. I guess I'm missing where you need our help.

I forked your demo and just created a new timeline that will run when time runs out. You should be able to change the backroundPosition of your spritesheet (i didn't know the new text coordinates) and move your button just fine.

 

see here:

 

http://codepen.io/GreenSock/pen/ZQWBbO?editors=001

[agenturge]

Awesome!  That actually worked like I needed it to.  thanks

 

I'm curious to know, though, if I wanted to do a completely different animation?  Like make the gray bar take up the entire bottom of the banner?

 

 

///edit - nevermind..I should experiment before asking.    :::the more you know:::