Jump to content
Search Community

Paused Timeline

Envision3 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

Hello, 

 

I have a small problem with paused timeline.  For some reason the timeline plays after the second click and not on the first. Is there a way to initialize the timeline on first click.

 

Here is a example: 

See the Pen jpBdt by NewFaceDesign (@NewFaceDesign) on CodePen

 

If you click on link 1 the timeline is not being initialized until the link 1 is clicked again. After that it plays on every click.

 

Thanks for your help.

Peter

Link to comment
Share on other sites

Just a simple logic issue.

 

Your condition in your click handler says

"if the timeline is reversed, then play"

 

The problem is the first time the button is clicked, the timeline is NOT reversed, thus it doesn't play. Makes sense?

 

Easy solution, start the timeline reversed:

 

var tl3 = new TimelineLite({paused:true, reversed:true});
tl3.to('#semi', 1, {opacity: 1});
 
$('.custom').on('click', function() {
tl3.reversed() ? tl3.play() : tl3.reverse(); 
});
Link to comment
Share on other sites

Carl, thanks for quick answer, that makes perfect sense.

 

Another hopefully quick question. Per my codepen I like to create a timeline sequence for each link. 

 

I will have 3 different anchors controlling each timeline.  I'm little confused how to combine and reverse them. 

 

How could I play one section on a click and reverse the other two?

 

Hope this make sense.

 

 

Thank you,

Peter

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