Jump to content
Search Community

Pause and Clear a TimelineMax within a function call

reveldevil 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

How can I make this  work? 

 

I want to pause, clear/reset my TimelineMax from this onclick function call.  I'm getting an "Uncaught SyntaxError: missing ) after argument list" when I run the console.  Is what I'm trying to do correct or possible?

 

<div class="nav"><div class="arrowDown"><a href="#slide03" onclick="init03(); init02(tl2.pause(0); tl2.clear(); ); "></a></div></div>
            </div>

 

An abbreviatated JS version of the  init02() function has this:

 

function init02(){

 

   var tl2 = new TimelineMax();

         tl2.to...

 

}

 

Thank you for your time and help.

Link to comment
Share on other sites

Hi reveldevil :),

 

Do you happen to have a CodePen available? I think you'll always get the fastest and most accurate answers if everyone can see your code in action.

 

It's really quick and easy to set up a pen. Here's a link to a post by the super awesome Carl on how to do it. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Here's the link to a Basic Starter Pen which loads TweenMax and jQuery: 

See the Pen hbCir by GreenSock (@GreenSock) on CodePen

 

:)

Link to comment
Share on other sites

As far as I can tell, this is invalid JavaScript:

//BAD:
init02(tl2.pause(0); tl2.clear(); );

What exactly are you trying to do there? You're putting function calls with semicolons (which are treated like end-of-line indicators) INSIDE a function call where the parameters are supposed to go. 

 

Are you trying to pass the timeline to init02() as the only parameter? Maybe you meant this?: 

init02( tl2.pause(0).clear() );

?

  • Like 2
Link to comment
Share on other sites

Hi Jack,

 

So i have 3 fullscreen sliding background panels that host 3 different GS TimelineMax animated sequences.  One GS TimelineMax sequence per background panel.  The function init02() plays the TimelineMax sequence over a 15 second period of time.  If the user wants to see the next panel and the next TimelineMax animated sequnce, I want to stop, cancel, and reset the function init02() TimelineMax sequence (especially if it hasn't completed playing out) while at the same time I go to the next panel and start the new function init03() Timeline Max sequence.

 

I have created an arrow down object on stage and have applied an "onclick" JS event as shown in my example.  Yes I'm hoping to pause and clear by passing the the ( tl2.pause(0).clear() ) as a parameter in init02.  The init03 call is also added here to start the next animated TimelineMax sequence on the next background panel.

 

Let me know if what I'm trying to do is possible or if I should try something different.  Thanks.

Link to comment
Share on other sites

Hi reveldevil,

 

Unfortunately, there are quite a few problems with what you have. 

As Jack pointed out you are passing in poorly formed parameters to init02() but in addition, init02() isn't configured to accept any parameters.

Another problem is that you declare your timelines with var inside init02() and init03() functions which means it isn't possible to target those timelines outside those functions. In other words, once you create tl2 it isn't possible to clear it by clicking on your red box. 

 

Your demo is reduced to a point that it varies quite a bit from what you are trying to achieve so I'm not sure its really feasible to just slap a solution together for you. 

 

I think my best recommendation at this point is that you create your timelines outside of any functions so that they are globally accessible. This way when you want tl2 to play and tl3 to reset you can just do this inside any function you want.

tl2.play();
tl3.pause(0);

you could even make it totally dynamic like

function nextSlide(currentTimeline, nextTimeline){
  currentTimeline.play() // or restart()
  nextTimeline.pause(0) // or reverse()
}

nextSlide(tl3, tl2);

A technique like this will allow you to create your timelines once and re-use them multiple times. Doing it this way you will not have clear() timelines and then re-build them again.

 

 

you may also want to use a variable to keep track of the current timeline that is displaying so that you can easily tell it to reset

currentPanel = tl2;

// and then later in your code do

currentPanel.pause(0)

This post (and video) here explains a technique that may be too advanced for what you currently need, but there are a lot of concepts that you can learn from and borrow: http://greensock.com/forums/topic/11162-how-to-setup-control-of-tweens-and-timelines-together-and-separately/?p=44994

 

Notice how in the CodePen demo the "blueslide auto" and "redslide auto" buttons automatically "reset" the other timeline.

 

I wish I could be of more help, but I'm not sure what I can do short of creating the whole thing from scratch (not practical). Perhaps someone has some similar demos laying around. Unfortunately this question has a lot more to do with how you are going to structure your project and program the logic than simply resetting a timeline.

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