Jump to content
Search Community

Using GSAP to animate progressive display - 1 question

Didiergm 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, 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 



Link to comment
Share on other sites

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:




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





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