Jump to content
Search Community

re-triggering Timelinemax during animation

steve5000 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 All,

 

I have created a timeline which triggers an animation of a few lines of text and a couple of images. I heavily simplified the code to keep it simple in my Codepen example.

 

My problem is that when I click to re-trigger the animation whilst it is already animating, the animation starts behaving in a way that I would not expect it to. Some of the text and/or images fade out or stop loading.

 

I'm two months into Javascript and GSAP so I'm sure it's down to my logic. I just cannot work out how to stop this happening. 

Help will be very much appreciated.

 

Thanks for your time.

 

Steven

See the Pen YPQyqy?editors=101 by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi steve5000  :)

 

you can use .isActive() to check if your tween/tl is playing or not , and if not .restart() :

// Click "NEXT" button functionality -------------------------
$("#next").click(function(){
if(!tlB.isActive()){
  // Text array cycle

  // Transition animations
 tlB.restart();
 }
});
var tlB = new TimelineMax({paused:true});
tlB.staggerFrom(".stag", 0.5, {x:-10, opacity:0, ease:Back.easeIn}, 0.15);

or just using restart .restart() :

// Click "NEXT" button functionality -------------------------
$("#next").click(function(){
  // Text array cycle

  // Transition animations
 tlB.restart();
});
var tlB = new TimelineMax({paused:true});
tlB.staggerFrom(".stag", 0.5, {x:-10, opacity:0, ease:Back.easeIn}, 0.15);
  • Like 2
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...