Jump to content
Search Community

How to start a second timelineMax after a button click?

Linde test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

See the Pen XxzRye?editors=1010 by Lindeg (@Lindeg) on CodePen

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

See the Pen jeaewO?editors=1010 by anon (@anon) on CodePen

 

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