Linde

How to start a second timelineMax after a button click?

Recommended Posts

Hey everybody,

 

I have a question about to start a second timelineMax. 

I was discovering and trying out the splitText. Now I have a problem.

I added a red text with "Move the box". I want this to appear after the start button has been pressed. I'm thinking about a postion parameter? I've tried many options, but I can't figure it out.

 

This is the code of the red text. This must be appear when the start button is pressed.

var tl= new SplitText("#box > p", {type: 'chars', charsClass: 'overflow'});
var tl = new TimelineMax();
tl.staggerFromTo('.overflow', 0.1, {opacity: 0, y: 50}, {opacity: 1, y: 0}, 0.05);


Could someone help me out?

Thanks in advance

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks for the demo. Very helpful.

 

Its a bit unorthodox to use the same tl variable for multiple things. It looks like you are assigning tl a value 3 times. Makes it a bit confusing.

 

That aside, from what I understand if you want to play an animation when you click a button you just need to pause() the animation when you create it and then play() it when the button is clicked.

 

to pause the timeline when its created you can do that in the constructor like so

 

var tl1 = new TimelineMax({paused:true});
tl1.staggerFromTo('.overflow', 1, {opacity: 0, y: -350}, {opacity: 1, y: 0}, 0.05);


 

in the demo below the red text will animate when you click the start button.

 

  • Like 3

Share this post


Link to post
Share on other sites

@Carl Thankyou for your time. This is exactly what i want! I will remember this for the next times. Thankyou for your help!

  • Like 1

Share this post


Link to post
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.