Jump to content
Search Community

Pause/kill timeline if function is called after label?

ohem 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

Hi, I'm working on a project that uses a photo gallery component in Google Web Designer (required for my current job).  I also have a GSAP animation that occurs before the gallery appears, and that works perfectly, but now I'm being asked to add an animation at the end of the gallery cycle too.

 

That works fine too (see reduced code example below), but I just want to prevent the ending animation from occurring if the user has already interacted/is interacting with the gallery. 

 

var endTime = (galleryCycleTotalDur + galleryCycleDelay)/1000 + 2;


var tl = new TimelineMax();

tl
.to(".anim-intro-img", 0.5, {autoAlpha:0}, 3)
.from(".anim-main-content", 0.5, {autoAlpha:0, force3D:false},"-=0.25") //the gallery is included here
.addLabel("endIntro")
.to(".anim-intro-img", 0.5, {autoAlpha:1}, endTime);

 

So now I have it set up in GWD to call a function ("cancelPromo") on MouseOver, but I'm not sure how to set up that function to pause the second part of the timeline.

 

I hope this makes sense.  Any suggestions are much appreciated!

 

Link to comment
Share on other sites

Hi @ohem :)

 

So the ending animation never plays if the user has done something with the gallery? Could you just set up a toggle on mouseover and, if true, the ending animation doesn't play - if false it does. You could add an onComplete callback to the tween right before your 'endIntro' label or you could move the ending animation from the timeline into the function itself and call it when the timeline completes. If the toggle is true, the function plays the end animation tween. If false, it does not.

 

I'm not 100% sure if that's what you meant or if this helps at all. 

 

Happy tweening.

:)

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