Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
paulbr

slideshow with controls

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

I have a short slideshow with animated slides. I'm trying to have some buttons call up each slide as they are clicked but I'm having trouble getting the buttons to function. I suppose I am having difficulty understanding how to apply labels and how to skip to those labels in the timeline from a click. Does anyone know of a tutorial that covers this kind of stuff? Thanks.

Link to comment
Share on other sites

Short of creating an entire file for you, do you have some sample code or a partially working example that I can aid you in fixing?

 

Are you having trouble adding a label at the proper time?

Do you want to play to a label? Play from a label? Stop at a label?

 

Getting a basic label-based navigation is fairly straight-forward.

Let me know what I can do to help you over the hurdles.

 

 

c

Link to comment
Share on other sites

For a slideshow, even idvidual declarations of TweenLite/Max would also be straightforward to implement

 

$("#next).live("click",function(){
   var imgContainer = $("#imgContainer");
    TweenLite.to(imgContainer, 1.0, {css:{'left':'-=200'}});
});
// 200 is the width of your container or something
// same thing applies for previous button and add some logic

Link to comment
Share on other sites

here's an example of what i'm trying to do:

 

$(function() {

var speedometer = document.getElementById("speedometer"),
 man = document.getElementById("man"),
 woman = document.getElementById("woman")



var tl = new TimelineMax({repeat:-1,repeatDelay:.5});
  tl.to( man, 2, {css:{left:100}})
  tl.to( man, 2, {css:{left:"100%"}}, 2)
  tl.to( woman, 2, {css:{left:100}})
  tl.to( woman, 2, {css:{left:"100%"}}, 2)
  tl.to( speedometer, 2, {css:{left:100}})
  tl.to( speedometer, 2, {css:{left:"100%"}}, 2)

});

 

There are three "slides" here. Each slide moves 100px into the stage area hangs out for a couple seconds then continues moving left out of the stage area. Then the next slide moves in. This just repeats forever using the timeline.

 

Now what I'd like to have happen is to have three buttons (divs?) that hang out on top of the slide show. When you click button 1 it starts the first slide coming in from the left again, clicking button 2 starts slide 2, etc. Ideally I'd like the currently playing slide to fade out then the other one to start playing right then but I think I can handle that part on my own once I've got the controls figured out a bit better.

 

thanks.

Link to comment
Share on other sites

I don't follow your explanation exactly but here is a very simple example of adding a label and jumping to it:

 

//start the timeline in a paused state

var tl = new TimelineMax({repeat:-1,repeatDelay:.5, paused:true});
  tl.to( man, 2, {css:{left:100}})
  tl.to( man, 2, {css:{left:"100%"}}, 2)

//add label immediately after 2nd man tween ends
  tl.append("introWoman");
  tl.to( woman, 2, {css:{left:100}})
  tl.to( woman, 2, {css:{left:"100%"}}, 2)



  tl.to( speedometer, 2, {css:{left:100}})
  tl.to( speedometer, 2, {css:{left:"100%"}}, 2)



tl.play("introWoman");

 

if you want to trigger an out animation on the current section and then jump to any other sections in animation, it can get a little tricky, especially if you are clicking buttons while transitions are happening. Its all possible. I did a whole series on smooth TimelineMax transitions for Flash. It probably won't help much, but it serves as a good example of what is possible: http://www.snorkl.tv/2011/04/bullet-proof-timelinemax-transitions-part-3-reverse-out-or-forward-out/

Link to comment
Share on other sites

thanks for the example above. i guess the only remaining question for me is how can i apply the play("introwoman") bit of functionality to a div on the page? basically trying to create a button that will jump to that part of the timeline. does that make sense?

Link to comment
Share on other sites

if you are using jQuery, see Michael71's code above for adding a click function.

 

or do something like:

 

document.getElementById('divID').onclick=function() {
    tl.play("introWoman");
};

Link to comment
Share on other sites

ah ok. i think i get it now. thanks for all your help!

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.

×