Jump to content
GreenSock

ohem

Next / Previous button to control nested timelines

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, this is probably super obvious, but I was wondering how I might set up a next & previous button, so that when clicked, it would play a next or previous step in a timeline sequence?

 
What I want to do is basically an animated slideshow/presentation.  The first frame/scene (which has it's own timeline) would animate, and when it's over it would pause until someone clicks the "next" button.  If the "previous" button is clicked, I'd like it to replay the previous scene.
 
What I'm stuck on is getting the master timeline to pause between scenes, as well as getting it to replay just the previous scene (and not reverse the entire master timeline).
 
It seems simple but I'm a little stuck.  I put together a simple example on codepen to illustrate what I'm trying to do: 
 
Any insight is much appreciated.

See the Pen wWBoRg by ohem (@ohem) on CodePen

Link to comment
Share on other sites

Here's a pattern you could get started with. You really didn't say if you could go back more than one scene, in which case you would need to add a delay to allow time for a response before playing.

See the Pen OXPWJp?editors=0010 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Here's a pattern you could get started with. You really didn't say if you could go back more than one scene, in which case you would need to add a delay to allow time for a response before playing.

See the Pen OXPWJp?editors=0010 by osublake (@osublake) on CodePen

Thanks!  The next button functionality is perfect, but I would like the previous button to replay the previous scene.  So if you're on "part 2", it would go back to "part 1", or if you're on "part 3" it would replay "part 2" etc.

 

How would I do that?  (Currently the "previous" button is just replaying the current scene.)

Link to comment
Share on other sites

Oh wait, I got it, I changed var last to 0.

  • Like 1
Link to comment
Share on other sites

Clever setup, Blake.

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