Using GSAP to animate progressive display - 1 question

[Didiergm 0 Likes (Newbie)]

Hi all, new user here. Just discovering the power of GSAP and quite amazed at what I am finding. 

 

But I have (more than) a few things I can't get my head round.

 

Here is the context: 

 

I need on some pages to display the content in a series of steps. Each time the user presses a key the program displays another part of the page like a new div with some text and/or some images. The keypress is necessary as a confirmation that the user read the previous "step".

 

I want to use GSAP to animate the divs into view. That's does not seem difficult starting the next div's animation on each keypress and checking is there is a running animation on the next keypress if yes then do not do anything if no the animate the next div  

 

But I also need the user to be able to skip the animation : ie if it is not the 1st time the user sees that page I would like him/her to be able to press on the keyboard in succession. If there is an animation in progress I would like to interrupt the animation and get the animated div to the position/opacity it would be at had the animation run to the end. So far I have only found kill which stops short the animation where it is at that point in time (really what the name suggests). So my page is then left with partially visible divs which is not nice and defeats my purpose. 

 

Any suggestion on how to achieve this ?

 

Thanks in advance 

 

Didier

[Rodrigo 2,662 Likes (Superhero)]

Hi Didier and welcome to the GreenSock forums.

 

If I understand correctly the best solution for this scenario is a Timeline and labels are your best friends in this cases, because they allow you to go to different points in the timeline without getting unwanted visual effects like the one you describe.

 

I'd recommend you to take a peak at theTimeline's documentation (TimelineLite/Max) in order to see which one serves better for your needs and take a look at this video Carl made regarding Timelines, which among other topics, covers the use of labels and how useful they are to what you're intending:

 

http://www.greensock.com/sequence-video/

 

Finally please take a look at this post in order to learn how to create a simple Codepen demo:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.