Jump to content
Search Community

TimelineLite - sliding in text and slide out (Newbie)

lister110 test
Moderator Tag

Recommended Posts

Hi everyone,

 

I am looking at using TimelineLite for small and simple banner (testing/playing). I have 3 clips sliding into the page pausing and then sliding out. Each clip being independent (so I'm using .appended). Im not sure how to play the first tween, pause, and then continue this tween to the end of _x (AS2), this will all need to continue as a loop... At the moment I have them just sliding onto the stage (clip w:155) then play the second tween etc.., could someone please help

 

(Stage 468x60)

 

import com.greensock.*;

import com.greensock.easing.*;

 

var timeline:TimelineLite = new TimelineLite();

timeline.append( new TweenLite(mc_1, 5, {_x:"-300", ease:Elastic.easeOut}) );

timeline.append( new TweenLite(mc_2, 5, {_x:"-300", ease:Elastic.easeOut}) );

timeline.append( new TweenLite(mc_3, 5, {_x:"-300", ease:Elastic.easeOut}) );

 

Thanks

Link to comment
Share on other sites

you would need 2 tweens for each mc.

 

1: right > center

2: center > left (after delay)

 

timeline.append( new TweenLite(mc_1, 5, {_x:"-150", ease:Elastic.easeOut}) );
timeline.append( new TweenLite(mc_1, 5, {_x:"-300", ease:Elastic.easeOut}), 2 );

 

 

 

if you are using v12 you could use 1 tween with a SlowMoEase

 

use the SlowMoEase Visualizer: http://www.greensock.com/v12/

 

and set power to 1

TweenMax.to(mc, 6, {x:590, ease:SlowMo.ease.config(0.7, 1)});

Link to comment
Share on other sites

Hi I have amended the code:

 

 


import com.greensock.*;
import com.greensock.easing.*;

var timeline:TimelineLite = new TimelineLite();
timeline.append( new TweenMax(mc_1, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:5, ease:Bounce.easeOut}}) );
timeline.append( new TweenMax(mc_1, 1, {_x:-150, ease:Elastic.easeInOut}), 2);
timeline.append( new TweenMax(mc_2, 1, {_x:240, ease:Elastic.easeInOut}) );
timeline.append( new TweenMax(mc_2, 1, {_x:-100, ease:Elastic.easeInOut}), 2);
timeline.append( new TweenMax(mc_3, 1, {_x:240, ease:Elastic.easeInOut}) );
timeline.append( new TweenMax(mc_3, 1, {_x:-100, ease:Elastic.easeInOut}), 2);

 

I wated to create a blur in, see the text without a blur and then blur out, also when I play this the stage is white first, then it changes to grey (my bg colour) and then it plays the animation..

 

Thanks for the help so far

Link to comment
Share on other sites

there are a number of ways you can handle the blur.

 

one way is to

 

//initialize the blur setting with a 0 duration tween outside of the timeline:
TweenLite.to(mc_1, 0, {blurFilter:{blurX:5}});
TweenLite.to(mc_2, 0, {blurFilter:{blurX:5}});
TweenLite.to(mc_3, 0, {blurFilter:{blurX:5}});
//etc


//move mc_1 on stage and tween blurX to 0;

timeline.append( new TweenMax(mc_1, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}}) );

//move mc_1 off stage and blurX to 5;
timeline.append( new TweenMax(mc_1, 1, {_x:-150, blurFilter:{blurX:5}, ease:Elastic.easeInOut}), 2);

 

 

Once you wrap your head around that, look into fromTo() which allows you to set start and end values in a single tween. staggerFromTo() will allow you to apply the same animation to multiple assets and control the timing in between each tween.

Link to comment
Share on other sites

Is there any examples of looping animations, I'm checking the forums as well...

 

I have the animation playing, can I place this into some function and then onComplete reset and play again? Sorry if this is a dumb question..

Link to comment
Share on other sites

you can add an onComplete callback to a TimelineLite

var timeline:TimelineLite = new TimelineLite({onComplete:someFunction})

someFunction(){
  timeline.restart();
}

 

OR use TimelineMax's repeat power:

 

var timeline:TimelineMax = new TimelineMax({repeat:5});

 

there is a lot of good info here:

http://www.greensock.com/as/docs/tween/com/greensock/TimelineMax.html#TimelineLite()

http://www.greensock.com/as/docs/tween/com/greensock/TimelineMax.html#TimelineMax()

http://active.tutsplus.com/series/timelinelite-ultimate-starter-guide/ (v11)

Link to comment
Share on other sites

I got this working thanks for all the help, heres the code..

 

 

import com.greensock.*;
import com.greensock.easing.*;

//initialize the blur setting with a 0 duration tween outside of the timeline:
TweenLite.to(mc_1, 0, {blurFilter:{blurX:50}});
TweenLite.to(mc_2, 0, {blurFilter:{blurX:50}});
TweenLite.to(mc_3, 0, {blurFilter:{blurX:50}});
//etc

var timeline:TimelineLite = new TimelineLite({onComplete:myFunction});

//move mc_1 on stage and tween blurX to 0;
timeline.append( new TweenMax(mc_1, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) );

//move mc_1 off stage and blurX to 50;
timeline.append( new TweenMax(mc_1, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2);

//move mc_2 on stage and tween blurX to 0;
timeline.append( new TweenMax(mc_2, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) );

//move mc_2 off stage and blurX to 50;
timeline.append( new TweenMax(mc_2, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2);

//move mc_3 on stage and tween blurX to 0;
timeline.append( new TweenMax(mc_3, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) );

//move mc_3 off stage and blurX to 50;
timeline.append( new TweenMax(mc_3, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2);

function myFunction(){
timeline.restart();						
}

 

I am also watching your great screencasts over at ActiveTutes.

 

 

rob

  • Like 1
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...