Simple question on animating out a tagline/whatever

[lasadorian]

basically i followed the new video on lynda whcih was great!.

 

But i am trying to figure out a simple way to animate out of screen an element.

 

 

var tl1 = new TimelineMax();

 

tl1.to('#myAd', .4, {opacity: 1})

.from('#myAd_yellowtab', 2.2, { left: -80, ease: Power2.easeOut }, '-=.5')

.from('#myAd_tagline1', 3, { opacity: 0, left: -180, ease: Power4.easeOut, }, '-=2.6')

.from('#myAd_tagline2', 3, { delay:2, opacity: 0, left: -180, ease: Power4.easeOut }, '-=3.6')

.from('#myAd_tagline3', 3, { delay:4, opacity: 0, left: -380, ease: Power4.easeOut,  }, '-=3.6')

.from('#myAd_cta', 1.3, { opacity: 0, top: 300, ease: Back.easeOut.config(1.7) }, '-=1.8');

 

so both tagline 1 and 2 tween into the scene then i want them to tween out.

 

I'm not sure how to attack that in a simple manner.. reverse? yoyo? when i tried to just make another line of code nothing happend.

 

any help?

[Carl]

A very simple CodePen demo would really help, but for now I can only suggest you use a to() to tween them to another position

 

 

.from('#myAd_tagline1', 3, { opacity: 0, left: -180, ease: Power4.easeOut, }, '-=2.6')

.from('#myAd_tagline2', 3, { delay:2, opacity: 0, left: -180, ease: Power4.easeOut }, '-=3.6')

 

.to('#myAd_tagline1', 3, { opacity: 0, left: 300, ease: Power4.easeOut, }, '+=1')

.to('#myAd_tagline2', 3, { delay:2, opacity: 0, left: 300, ease: Power4.easeOut }, '+=1')

 

how to make a demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[lasadorian]

thanks for the response. let me try that out and will from now on make demos. thanks for your time

[lasadorian]

thank you this will work.. was just a simple miss use of the .from... needed a .to

 

looks like i have more studying to do.