Pausing a timeline, but completing the current 'step'

[Mr Muddy]

Hi all,

 

Just started out with GSAP this morning and am kicking myself that I never looked at it before!   I could have saved myself so many headaches in the past.

 

Anyway, my first project is to deal with a fairly simple multi-slide animation on a site.   A series of slides needs to appear, some animation of the content happens, then we move on to the next.  

 

The number of slides and the exact content of each slide is variable, so I've built a little script to iterate through the markup and create some nested timelines.   There's a 'master' timeline which deals with the resizing of the main container and the transitions between the slides, then there's a 'child' timeline for each of the slides to animate the content.  (Currently the codepen has a very simplistic version of these child timelines - they do more than just fade things up in sequence).

Everything is working, and it was all pretty effortless..   I have two questions:

1) Given the code I've written, are there any glaringly bad things I've done.  Are there better ways to implement this?  (Please be gentle, it's literally my first GSAP code)

 

2) I want the animation to pause on hover.  This is simple enough, and currently works, but at the moment, everything pauses.   Is it possible for the currently active child timeline to complete, and then the parent to pause?  So, when you mouse over, the currently visible slide would complete its own internal animation, but the parent would not then trigger the next.

Thanks in advance!

Tim

See the Pen poEyZdY by dorsetdigital (@dorsetdigital) on CodePen

[mikel]

Hey @Mr Muddy,

 

Welcome to the GreenSock Forum.

 

Great job. 

Here is a slightly different slider option.
The endless loop is initiated with a delayedCall

and can therefore simply be suspended (without stopping the current animation) and used again.

 

See the Pen 58b5ec8c61376a63fcc11fe1c7eef372?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Mr Muddy]

Hi @mikel

 

Thanks for that approach..   it set me on the path I needed to make it work.

 

I've been slowly working through some of the docs as I've been building this..   I think Greensock could be my new favourite thing