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:::

Fair enough. http://codepen.io/anon/pen/XXddLq 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.

I have a banner that runs a quick GSAP driven animation as well as a JS based countdown timer. //edited to include link http://codepen.io/anon/pen/XXddLq 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.